如何对具有相同类名的所有元素调用javascript函数

我试图在用户单击我页面上的某个元素时显示一个弹出窗口。我有弹出窗口的所有功能正常工作；但是，我很难让与指定类名匹配的每个元素的函数都弹出。我的代码如下：

<script>

        function descPop () {

            // Description pop-up 
        // Get the modal
        var modalprod = document.getElementById('myModalTwo');

        // Get the button that opens the modal
        var btnprod = document.getElementsByClassName("add-but")[0];

        // Get the <span> element that closes the modal
        var spanprod = document.getElementsByClassName("prod-close")[0];

        // When the user clicks on the button, open the modal 
        btnprod.onclick = function() {
            modalprod.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        spanprod.onclick = function() {
            modalprod.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modalprod) {
                modalprod.style.display = "none";
            }
        }   
    }

    </script>

函数descPop（）{
//说明弹出窗口
//获取模态
var modalprod=document.getElementById（'myModalTwo'）；
//获取打开模式对话框的按钮
var btnprod=document.getElementsByClassName（“添加但”）[0]；
//获取关闭模态的元素
var spanprod=document.getElementsByClassName（“prod close”）[0]；
//当用户单击该按钮时，打开模式对话框
btnprod.onclick=函数（）{
modalprod.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
spanprod.onclick=函数（）{
modalprod.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modalprod）{
modalprod.style.display=“无”；
}
}   
}

现在，我知道目前这段代码正在将索引0分配给var btnprod；因此，只有当您单击与类名“addbut”匹配的第一个元素时，它才会弹出。如何分配和访问所有元素，以便每个类名为“add but”的标记都会弹出窗口

谢谢

解决方案：

function descPop () {

            // Description pop-up 
        // Get the modal
        var modalprod = document.getElementById('myModalTwo');

        // Get the button that opens the modal
        var btnprod = document.getElementsByClassName("add-but");

        // Get the <span> element that closes the modal
        var spanprod = document.getElementsByClassName("prod-close");

        // When the user clicks on the button, open the modal 
        for (var i = 0; i < btnprod.length; i++) {
            btnprod[i].onclick = function() {
                modalprod.style.display = "block";
            }
        }

        // When the user clicks on <span> (x), close the modal
        for (var i = 0; i < spanprod.length; i++) {
            spanprod[i].onclick = function() {
                modalprod.style.display = "none";
            }
        }


        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modalprod) {
                modalprod.style.display = "none";
            }
        }   
    }

函数descPop（）{
//说明弹出窗口
//获取模态
var modalprod=document.getElementById（'myModalTwo'）；
//获取打开模式对话框的按钮
var btnprod=document.getElementsByClassName（“添加但”）；
//获取关闭模态的元素
var spanprod=document.getElementsByClassName（“prod close”）；
//当用户单击该按钮时，打开模式对话框
对于（变量i=0；i

您添加了一个jquery标记，但这里没有jquery。使用jquery，您只需编写：

$('.classname').on ('click', function () {
    //activate modal
});

或者，您可以将它们作为集合添加到变量中，引用此变量将应用于具有此类的任何元素

var x = $('.classname');

---

如果Jquery不是一个选项，您可以通过迭代HtmlCollection来执行：

var btnprod = document.getElementsByClassName("add-but"); // <- this gives you  a HTMLCollection 
for (var i = 0; i < btnprod.length; i++) {
    btnprod[i].onclick = function() {
        modalprod.style.display = "block";
    }
}

---

var btnprod=document.getElementsByClassName（“添加但”）；// 您可以将代码更改为以下内容：


$（'.add but'）。在（'click'，function（）上{
$（this.css（'display'，'none'）；
});

法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法


法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法


法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法法
我更喜欢更性感的解决方案：

document.getElementsByName('add-but').forEach(btn => {
    btn.onclick = (e) => {
        btn.style.display = "block"
    }
});

同一行：

document.getElementsByName('add-but').forEach(btn => btn.onclick = (e) => btn.style.display = "block" );

如果您希望在同一btn上有多个点击事件：

document.getElementsByName('add-but').forEach(btn => btn.addEventListener('click', e => btn.style.display = "block" ));

var$btnprod=$（“.add but”）并绑定一个类似$btnprod.on（“click”，function（）{//YOUR CODE}）l的事件。。。。。。。。。。。。。。。。。。。。。。使用jquery来做这件事你的代码是javascript，但你标记了jquery，试试jquery，这会让生活更轻松。你是对的，我很抱歉，我不是有意标记jquery的。这工作非常好。。。干杯：）我将补充这个问题。