如何将Javascript函数应用于一个类的多个实例

Question

我有一个网页，它使用一个简单布局的表格显示一组图像。我想做的是允许用户点击图像，并使该图像以模态放大。

包含图形的html行：

<tr>
<td>Graphic One</td>
<td><img class="graph" src="/chart1.jpg">
<div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<img src="/chart1.jpg">
</div>
</div>
</td>
</tr>

重复此操作以创建更多具有图形的行。这是脚本：

<script>
let modalBtn = document.querySelector(".graph")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
modal.style.display = "block"
}
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
</script>

不过，这似乎只激活了页面上的第一个图形，所以我假设querySelector((在找到的第一个实例处停止。

如何将其应用于表中有图像的每一行？

Answer 1

如果您想将其应用于每个表行，您只需要选择所有<td>，然后迭代地将与上面相同的逻辑应用于其中的元素。

要访问各个元素，可以简单地使用Element.querySelector()，假设Element指的是<td>。为包含所有这些元素的<td>元素提供一个类有助于缩小选择范围，例如<td class="action">:

<tr>
<td>Graphic One</td>
<td class="action">
<img class="graph" src="/chart1.jpg">
<div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<img src="/chart1.jpg">
</div>
</div>
</td>
</tr>

那么你可以这样做：

document.querySelectorAll('.action').forEach(el => {
let modalBtn = el.querySelector(".graph");
let modal = el.querySelector(".modal");
let closeBtn = el.querySelector(".close-btn");
modalBtn.addEventListener('click', e => {
// Stop click event from bubbling up
e.stopPropagation();
modal.style.display = 'block';
});
closeBtn.addEventListener('click', e => {
// Stop click event from bubbling up
e.stopPropagation();
modal.style.display = 'none';
});
});
// Listen to click event on the window ONCE, outside the forEach loop
window.addEventListener('click', () => {
document.querySelectorAll(".modal").forEach(el => {
el.style.display = 'none';
});
});

您可以看到，我在for each循环中省略了窗口单击事件侦听器。原因是您可以简单地依靠event.stopPropagation来阻止点击事件冒泡到窗口对象。这意味着，您只需在窗口上绑定一次点击事件。

此外，我不建议使用Element.onclick = Function来添加事件侦听器，因为这意味着您只能通过这种方式分配一个处理程序。请改用Element.addEventListener。