Question

现在我希望此功能仅在点击<a data-popup="true"></a>元素时运行，但它会在每次<a>点击时运行。

(function($) {
    $(document).ready(function() {
        $('a').data('popup', 'true').click(function(e) {
            console.log($(this).data('popup'));
            e.preventDefault();
        });
    });
})(jQuery);

Answer 1

.data() method获取/设置与元素关联的数据;它没有像你期望的那样过滤元素。您实际上是在所有锚元素上设置键/值数据对，然后将事件侦听器附加到所有锚元素。换句话说，当您使用.data()方法设置数据时，将返回原始jQuery对象（这意味着.click()方法仍然将click事件处理程序附加到所有最初选择的锚元素）。

您正在寻找attribute selector。在这种情况下，选择器a[data-popup="true"]将选择data-popup属性值为true的锚元素。

$('a[data-popup="true"]').click(function(e) {
    console.log($(this).data('popup'));
    e.preventDefault();
});

Answer 2

下面的代码将附加代码中所有现有链接的数据。

$('a').data('popup', 'true').click(function(e)

你可以试试这个：

<a id="popid" data-popup="true"></a>

(function($) {
    $(document).ready(function() {
        $('#popid').click(function(e) {
            console.log($(this).data('popup'));
            e.preventDefault();
        });
    });
})(jQuery);

要检查所有链接的弹出窗口，您可以尝试以下操作。

(function($) {
    $(document).ready(function() {
        $('a').click(function(e) {
            if ($(this).data('popup')){
                console.log($(this).data('popup'));
                e.preventDefault();
            }
        });
    });
})(jQuery);

或

$('a[data-popup="true"]').click(function(e) {
    console.log($(this).data('popup'));
    e.preventDefault();
});

仅在具有特定属性的元素单击上运行函数

2 个答案: