Javascript GetElementsByCassName从php foreach获取一个元素

我用HTML编写了这段代码，其中我用PHP编写了一个foreach，以便它生成每个div

我想在单击Ocultar（隐藏）和Mostrar（显示）时更改div class=“div oculto”的样式，但仅在选定的div中更改

我的问题是，当我单击“Ocultar”时，它会对类“div oculto”隐藏所有div，而不仅仅是所选的div。当我点击“Mostrar”时也会发生同样的情况。它向我显示了所有的div class=“div oculto”，而不仅仅是所选的一个

我不能使用getElementById（），因为每个div都是根据PHP生成的foreach创建的

我想我必须向元素中添加一个addEventListener（），但我不知道如何才能使它正常工作

请帮帮我

非常感谢你

函数Mostrar（）{
var elements=document.getElementsByClassName（'div-oculto'）；
对于（var i=0；i

杜拉西翁



霍拉里奥

是的，您需要为要单击的每个对象应用一个事件侦听器，但不能作为一个组。不过，您仍然可以对这些组使用相同的处理程序函数。 例如：

    var ocultoElements = [];
    window.onload = function () {
        ocultoElements = document.getElementsByClassName('div-oculto');
        for (i = 0; i < elements.length; i++) {
            ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
        }
    }
    function oculto_clickHandler(e) {
        for (i = 0; i < ocultoElements.length; i++) {
            if (ocultoElements[i] !== e.target) {
                ocultoElements[i].style.display = "none";
            }
            else {
                ocultoElements[i].style.display = "block";
            }
        }
    }

var ocultoElements=[]；
window.onload=函数（）{
ocultoElements=document.getElementsByClassName（'div-oculto'）；
对于（i=0；i

这将是最简单的方法。通过使用

this

引用每个单独的项目，您可以显著缩短此代码。我必须从html标记中删除onclick吗？我删除了它，但它暂时不起作用：（首先，您不应该对类使用与元素id相同的名称，因为这将导致混淆（对您而言）第二，如果您只想让某些div元素对特定的按钮单击事件做出反应，那么您应该在每个单击事件处理程序中分别将它们作为目标。我所写的是对您所介绍内容的概括方法。