Question

我有一些jQuery“弹出窗口”，我知道您可以在运行时将onClick事件应用于对象，如下所示：

$('.popup').on('click', 'img.close', function() {
    // Remove the popup
});

但是，我不确定如何根据点击区分哪个弹出窗口而不是全部关闭。我是否必须将this关键字作为参数传递？

基本上，添加到文档中的所有弹出窗口都包含此样板代码：

<div class="popup">
    <div class="toolbar">
        Popup Title Here
        <img src="close.png" class="close"></div>
    </div>
    <p class="text">Popup content/data here<p>
</div>

我想将标记保留为此并控制onClick事件以及在运行时加载的函数内关闭哪个弹出窗口。这可能吗？

目前我正在为每个弹出窗口分配一个ID并根据弹出窗口ID删除它们，但这种方法似乎是多余的，我希望有更清晰的方法来处理它。

Answer 1

您可以使用.closest()找到所点击的.popup元素的父close元素

$('.popup').on('click', 'img.close', function() {
    $(this).closest('.popup').remove(); //or .hide() if you just want to hide the popup
});

单击时从DOM中删除元素的可移植函数？

1 个答案: