Warum muss die Taste zweimal klicken, um zu arbeiten?

Question

Ich bin neu in der Programmierung, ich möchte etwas geschrieben haben 3 Taste, um die Anzeige von 3 versteckten Bild jeweils zu steuern. Wenn ich auf die erste Schaltfläche klicke, erscheint das Bild sofort, aber es muss zweimal geklickt werden, um das zweite Bild anzuzeigen. Kann jemand helfen?

Ich habe 3 Taste auf diese Weise

<input type="image" img src="1.png" id="a1" href="javascript:;" onclick="change()"> 
<input type="image" img src="2.png" id="a12" href="javascript:;" onclick="change2()"> 
<input type="image" img src="3.png" id="a13" href="javascript:;" onclick="change3()"> 

3 Bild, das Standard ist "display: none"

und unter javascript Teil

<script> 
var isShow = false; 
function change() { 
if(!isShow) { 
    isShow = true; 
    document.getElementById('d1').style.display=''; 

} 
else 
{document.getElementById('d1').style.display='none'; 

} 

function change2() { 
if(!isShow) { 
    isShow = true; 
    document.getElementById('d2').style.display=''; 


} 
else { 
    isShow = false; 
    document.getElementById('d2').style.display='none'; 

} 
} 


function change3() { 
if(!isShow) { 
    isShow = true; 
    document.getElementById('d3').style.display=''; 


} 
else { 
    isShow = false; 
    document.getElementById('d3').style.display='none'; 

} 
} 
</script> 

irgendwelche Ratschläge

geschätzt würde

Answer 1

Um mit nur einer Bedingung pro Objekt umzugehen, könnte sou ein property, sagen wir 'displayed' an jedes von ihnen anhängen und dann damit arbeiten. Lassen Sie ein Beispiel tun, auf die erste Schaltfläche verwandt, aber es wäre genau sein das gleiche für die beiden anderen

document.getElementById('d1')['displayed'] = false; 

function change() { 
    var isShow = document.getElementById('d1')['displayed']; 
    if(!isShow) { 
      document.getElementById('d1').style.display=''; 
      document.getElementById('d1')['displayed'] = true; 
    } 
    else { 
      document.getElementById('d1').style.display='none'; 
      document.getElementById('d1')['displayed'] = false;   
    } 
} 

Aber das ist pädagogische und als xEterno erwähnt, sollten Sie sich mit jquery vertraut machen.

Answer 2

Sie können die Sichtbarkeit eines Artikels umschalten, indem Sieanrufenmit jQuery. Hier

ist eine Demo jsfiddle

Answer 3

Die Variable isShow der Schuldige ist.

Gemäß Ihrer Logik wird der Wert von isShow "wahr", wenn die Methode change() aufgerufen wird.

Daher wird bei anderen zwei Methoden die Ausführung immer auf den "else" Teil beim ersten Klick und isShow wird "falsch". Also müssen Sie erneut klicken.

Da Sie versuchen zu lernen, lasse ich Sie an eine andere Möglichkeit denken.

Answer 4

Da Sie in die Programmierung neu sind, versuchen Sie dies:

i Ihre Funktion neu geschrieben hatte, Verwenden Sie einfach nur eine Funktion, iam die ID des Elements vorbei, die Sie zum Anzeigen/Verbergen möchten. anstelle eines globalen Booleschen Wert (true/false) Prüfen, prüfen, ob das Element ausgeblendet ist/nicht:

function change(ids) { 
var elem = document.getElementById(ids); 
if(elem.style.display =='none') { 
    elem.style.display=''; 
} 
else{ 
    elem.style.display='none'; 
} 

}

Das DOM:

<input type="image" img src="1.png" id="a1" href="javascript:;" onclick="change('d1')"> 
<input type="image" img src="2.png" id="a12" href="javascript:;" onclick="change('d2')"> 
<input type="image" img src="3.png" id="a13" href="javascript:;" onclick="change('d3')"> 

Per @xEterno Vorschlag, können Sie dies mit jQuery erreichen.