Question

我有以下两个链接。当用户单击“编辑”时，我想将“取消”链接的数据操作属性更新为cancel-edit

<a class="btn btn-default js-edit" href="#" >Edit</a>

<a class="btn btn-default js-cancel" href="#" data-action="cancel-add">Cancel</a>

这是我的脚本来实现这个目标：

$(".container").on('click', '.js-edit', function (e) {

    e.preventDefault();

    $('a.js-cancel').data('action', 'cancel-edit');

    console.log($('a.js-cancel').data('action')); 

});

在控制台中，上述结果符合预期，即控制台显示cancel-edit

在上述操作后单击“取消”链接时，以下脚本不起作用。当我在控制台中查看结果时，它仍会输出cancel-add？

$(".container").on('click', '.js-cancel', function (e) {
    e.preventDefault();

    var a = $(this);

    if (a.attr("data-action") == 'cancel-edit') {
       // do something
    }

    console.log(a.attr("data-action"));
});

Answer 1

因为在jQuery中使用data()不会更新DOM中的data-*属性，而是更新对象本身。

只需在点击处理程序中再次调用data()：

if( a.data('action') == 'cancel-edit' ) 
{
       // do something
} 
else 
{
       // do something else
}

Answer 2

我建议你使用.prop（）而不是.attr（）因为.prop（）会给你最新的值，

jQuery数据属性更新不起作用？

2 个答案: