如何在具有相同类名的所有元素上调用javascript函数答案

【问题标题】：How to call javascript function on all elements with the same classname如何在具有相同类名的所有元素上调用javascript函数
【发布时间】：2016-12-14 08:23:27
【问题描述】：

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

<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>

现在，我知道目前这段代码正在将索引 0 分配给 var btnprod;因此，它只会在您单击与类名“add-but”匹配的第一个元素时弹出。如何分配和访问所有元素，以便每个类名为“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";
            }
        }   
    }

【问题讨论】：

var $btnprod = $(".add-but") 并绑定一个像 $btnProd.on("click", function() {// YOUR CODE})l .... .....................使用jquery来做
你的代码是 javascript 但你标记了 jquery，试试 jquery 让生活更轻松
你说得对，对不起，我不是故意给 jquery 打标签的

标签： javascript jquery html

【解决方案1】：

如果 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";
    }
}

【讨论】：

这工作得很好......干杯:) 我会补充这个问题。

【解决方案2】：

您可以将代码更改为以下内容：

$('.add-but').on('click', function() {
  $(this).css('display', "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-but">
  fafafafafa
</div>
<br>
<div>
  fafafaffafafaafafa
</div>
<br>
<div class="add-but">
  fafafafafafafaafafafaffafa
</div>

请注意，对于本示例，我已将显示更改为无而不是阻止。

这使用了 jQuery 选择器、事件绑定和 css 函数。

【讨论】：

【解决方案3】：

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

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" ));

【讨论】：

【解决方案4】：

您已经添加了一个 jquery 标记，但这里没有 jquery。使用 jquery 你可以写：

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

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

var x = $('.classname');

【讨论】：