.getElementsByClassNameを使用して複数のポップアップにアクセスする

Question

テキストをクリックすると、次のjavascriptを使用してさまざまなpopups.Imageポップアップを作成しようとしています。問題は、いずれかのテキストコンテナをクリックすると、すべてのポップアップイメージが表示されることです。私は何かが明らかでないことを知っている。どんな助けでも大歓迎です。ここでJSのコードです：

function myFunction() { 

var popup = document.getElementsByClassName("myPopup"); 

for(var i=0; i<popup.length; i++) { 

popup[i].classList.toggle('show'); 
} 
} 

HTML：

<div class="popup" onclick="myFunction()"><span class="castName">Viola,</span> 
<span class="popuptext myPopup"><img src=Viola_1.jpg   
style="width:300px;height:100%;" alt="Viola"><p>Miss Ellen Terry as Viola, mid 
to late 19th century</p></span></div> 

Answer 1

あなたの関数は、要素のリストを取得し、代わりにあなたがしたい要素のすべての要素にクラスのショー」を切り替えます。要素を関数に渡す必要があります。

<div class="popup" onclick="myFunction()"> 

へ：

あなたがからそれぞれのdivのためのonclickイベントを変更することができます次に

<div class="popup" onclick="myFunction(this)"> 

をあなたのjavascript

function myFunction(element){ 
    if (element){ //If the element is passed into this function 
     element.getElementsByClassName("myPopup")[0].toggle('show'); 
    } 
} 

Answer 2

Thumの中で、これは非常に役に立ちました。あなたは完璧に働いジャバスクリプトに次のことを示唆したと同じように、私はHTMLを変更することになった：

function myFunction(element) { 
var popup = element.getElementsByClassName('myPopup'); 
var i; 
for(i=0; i<popup.length; i--) { 
popup[i].classList.toggle('show'); 
} 
}