なぜボタンを2回クリックしなければならないのですか？

Question

私はプログラミングに新しいです、私は何かを書いて3つの隠し画像の表示をそれぞれ制御する3つのボタンがあります。最初のボタンをクリックするとすぐに画像が表示されますが、2回目の画像を表示するには2回クリックする必要があります。 誰も助けることができますか？

私はこのようにデフォルトで

<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画像3のボタンを持っている "表示：なし"

をとJavaScript一部

<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> 

の下に何かアドバイスは

をいただければ幸いです

Answer 1

オブジェクトごとに1つの条件のみを処理するために、souはそれぞれproperty、たとえば'displayed'を添付して処理することができます。最初のボタンに関連した例を、やってみましょうが、それは他の二つ

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;   
    } 
} 

ため正確同じことだろう。しかし、これは教育的で、かつxEternoは言及として、あなたはjqueryのを理解しておく必要があります。

Answer 2

を呼び出してアイテムの表示を切り替えることができますjqueryを使用しています。ここで

は、変数isShowが犯人であるデモjsfiddle

Answer 3

です。

ロジックに従って、change（）メソッドが呼び出されると、isShowの値は「true」になります。

したがって、他の2つの方法では、実行は常に最初のクリックで「else」部分に進み、isShowは「false」になります。だから、もう一度クリックする必要があります。

あなたが学習しようとしているので、私はあなたがそれをやる別の方法を考えさせるでしょう。

Answer 4

あなたがプログラミングに新しいしているので、これを試してみてください。

私は再びあなたの関数を書いていた、ただ一つだけの機能を使用し、あなたが/非表示を表示したい要素のidを渡しIAM。代わりに、グローバルなブール値（真/偽）をチェックする、要素が隠されているかどうかをチェックします/いない：

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

}

をDOM：@xEterno 1として

<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')"> 

提案、あなたはjqueryを使用してこれを達成することができます。