Question

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

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

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

由于

解决方案：

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

Answer 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";
    }
}

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，在此示例中，我已将显示更改为none而不是block。

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

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

Answer 4

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

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

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

var x = $('.classname');

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

4 个答案: