javascript - 使用 .getElementsByClassName 访问多个弹出窗口

Question

我正在尝试使用以下 JavaScript 创建各种弹出窗口。单击文本时会弹出图像。问题是，当我单击任何文本容器时，所有弹出图像都会出现。我知道我错过了一些明显的东西。任何帮助将非常感激。 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

您的函数获取元素列表，并将类“show”切换到每个元素，而不是您想要的元素。您必须将元素传递给函数。

您可以更改每个 div 的 onclick 事件:

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

至:

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