画像の可視性1

Question

に可視性を設定するvisibility:hiddenとonClickイベントの画像があります。画像のIDがImg_(somenumber)の場合

1つの画像が表示されているときに他の画像がすべて非表示になるようにするにはどうすればよいですか？ jqueryのを使用して

Answer 1

次のことを試みることができる：

• は、あなたが彼らの視界を操作したい画像のセットにクラスを追加します。例えば

次にあなたがのonclickイベントに次のようでした各画像のために：

<img src="{img_src}" class="myImages" onclick="$('img.myImages').hide(); $(this).show();" /> 

以上、当然のことながら、あなたはそれぞれの画像タグを変更する必要があります。

できない場合は（画像が多い）、ドキュメントが読み込まれたときにトリガーされる関数を使用して、各画像の 'onclick'イベントのハンドラーを追加してみてください。これも簡単にjqueryや別のjsライブラリを使用して簡単に実現しました。

Answer 2

これを行う方法は数多くあります。私はあなたがそれをより深く考えたがっていると確信しています。しかし、jQueryを使わない答え。これをあなたのonClickハンドラとして追加してください。 thisキーワードを必ず渡してください。

<img onclick="toggleVisible(this);" src="" /> 

は、どこかのページでこの機能を含める：あなたがに実行されます

function toggleVisible(clickedLI) { 
    var imgs = document.getElementsByTagName('img'); 
    var i = imgs.length; 
    while (i--) { 
     var img = imgs[i]; 
     if (img.id.indexOf('Img_' == 0)) { 
      img.style.visibility = img.parentNode == clickedLI ? 'visible' : 'hidden'; 
     } 
    } 
} 

最初の問題は、隠された画像を取り戻す方法がないということです。彼らはそこにいて、文書内のスペースを占めていますが、クリックイベントには反応しません（少なくともChromeではそうではありません）。アンドレアス氏によると、画像がたくさんある場合は、より効率的な方法があります。