使用.getElementsByClassName訪問多個彈出窗口

我正在嘗試使用以下javascript來創建各種彈出窗口。單擊文本時彈出圖片。問題是，當我點擊任何文本容器時，所有彈出的圖像都會出現。我知道我錯過了一些明顯的東西。任何幫助將非常感激。這裏是JS代碼：使用.getElementsByClassName訪問多個彈出窗口

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>

來源

2016-11-10 N. deSaillan

「文本」如何與正確的「彈出」？ – NewToJS

嗨，文本是一個容器，點擊後，激活一個彈出的圖像。 –

你的函數獲取元素的列表和切換類「節目」的每個元素你想要的元素來代替。您必須將元素傳遞給函數。

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

到：在你的JavaScript

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

來源

2016-11-10 06:30:17

謝謝Thum！ –

姆

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

然後，這是非常有益的

您可以爲每個DIV從改變onclick事件。我最終改變了HTML，如你所建議的，並做了以下JavaScript的工作，完美：

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

來源

2016-11-10 17:09:52

使用.getElementsByClassName訪問多個彈出窗口

回答

相關問題