JQuery 呼叫弹出窗口

JQuery call popup

本文关键字：窗口 呼叫 JQuery      更新时间：2023-09-26

我是一名学徒，从未使用过Javascript。我的Javascript函数调用弹出窗口。这适用于第一个按钮，但不适用于以下所有按钮，并且由于应用程序不断添加按钮（同一类），我无法硬编码。我想这将是 JQuery 的解决方案......（"open"）和（"openPopupUseExisting"）是两个按钮。

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('blackout').addEventListener('click', function () {
            document.getElementById('popup').className = "";
            document.getElementById('blackout').className = "";
            document.getElementById('popupUseExisting').className = "";
        }, false);
        document.getElementsByClassName("open")[0].addEventListener('click', function () {
            document.getElementById('popup').className = 'visable';
            document.getElementById('blackout').className = 'visable';
        }, false);
        document.getElementsByClassName("openPopupUseExisting")[0].addEventListener('click', function () {
            document.getElementById('popupUseExisting').className = 'visable';
            document.getElementById('blackout').className = 'visable';
        }, false);
        document.getElementsByClassName("close")[0].addEventListener('click', function () {
            document.getElementById('popup').className = "";
            document.getElementById('blackout').className = "";
            document.getElementById('popupUseExisting').className = "";
        }, false);
    };
</script>

document.getElementsByClassName("close")[0]

看到那个0了吗？

getElementsByClassName 返回一个类似数组的对象。你正在从它身上得到第一项。

用for循环循环它。

朋友，您不需要仅仅为了绑定动态添加的元素而添加整个库。

您可以绑定 document for click 事件，然后检查单击的元素是否是您想要的元素。它可以防止动态添加的元素被取消绑定，因为它的目标是整个文档。

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('blackout')) {
        // your fancy magic with .blackout
    } else if (e.target.classList.contains('open')) {
        // your fancy magic with .open
    }
}, false);

如果你真的想使用 jQuery，按照你的顺序，这很简单，使用 on 方法

$('.open').on('click', function(){
  // your fancy magic with .open
});
相关文章：