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

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

包含图形的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>

让modalBtn=document.querySelector（“.graph”）
让modal=document.querySelector（“.modal”）
让closeBtn=document.querySelector（“.closeBtn”）
modalBtn.onclick=函数（）{
modal.style.display=“块”
}
closeBtn.onclick=函数（）{
modal.style.display=“无”
}
window.onclick=函数（e）{
如果（例如，目标==模态）{
modal.style.display=“无”
}
}

不过，这似乎只激活页面上的第一个图形，因此我假设querySelector（）在找到的第一个实例处停止

---

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

如果要将其应用于表中的每一行，只需选择所有

，然后迭代地将与上面相同的逻辑应用于其中的元素

要访问各个元素，只需使用

Element.querySelector（）

，假设

Element

引用

。它有助于将包含所有这些元素的

元素赋予一个类，以便您可以缩小选择范围，例如

：

您可以看到，我没有在for each循环中单击事件侦听器窗口。原因是您可以简单地依靠

event.stopPropagation

来阻止单击事件冒泡到窗口对象。这意味着，您只需在窗口上绑定一次click事件

另外，我不建议使用

Element.onclick=Function

来添加事件侦听器，因为这意味着您只能以这种方式分配一个处理程序。使用

元素。改为使用addEventListener

。

。querySelector（）

将返回第一个匹配的元素。尝试使用

.querySelectorAll（）

返回所有匹配的元素，然后根据需要循环它们。

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