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

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

您可以从以下位置更改每个div的onclick事件：

.as-console-wrapper{top:0;max-height:100%!important;}

为：

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

然后在你的javascript中

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

Answer 2

Thum，这非常有帮助。我最后按照你的建议改变了HTML，并对javascript做了以下工作，这完美地运作了：

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

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

2 个答案: