我有一个具有如下数据属性的跨度:
<span class="delete" data-action="enable" title="Non usare più questa anagrafica" data-toggle="tooltip" data-placement="top" >
点击跨度,我寻找 data-action 属性以在后端执行我的操作,它工作正常:
$('.delete').click(function(e){
e.preventDefault();
var clicked = $(this);
var toggle = $(this).children('i');
var id = $(this).closest('div').data('value');
var action = $(this).data('action');
如果一切正常,我想将数据操作更改为“禁用”,因为此跨度充当开/关按钮,所以我这样做:
if(action=='enable'){
toggle.removeClass('fa-toggle-off text-red').addClass('fa-toggle-on text-green');
toggle.parent('span').data('action','disable');
toggle.parent('span').attr('data-original-title','Non usare più questa anagrafica');
}else{
toggle.removeClass('fa-toggle-on text-green').addClass('fa-toggle-off text-red');
toggle.parent('span').attr('data-action','enable');
toggle.parent('span').attr('data-original-title','Riattiva questa anagrafica');
}
如果我检查页面上的元素,我会看到数据操作已正确更新。
问题是,如果我再次单击按钮 console.log(action) 仍将返回原始数据操作值而不是更新的值(即使检查元素我看到更新的值)。 我在这里缺少什么?每次单击按钮时都会重新设置操作,因此我不希望它仍然是上一次迭代的值......如果我有一个按钮已经在页面加载时执行“禁用”操作,我的代码工作正常.有什么提示吗?
答案 0 :(得分:2)
您正在使用 attr()
和 data()
更新和读取数据属性。您必须使用其中一种,而不是同时使用,因为它们会影响不同位置的数据属性。 attr()
直接更新 DOM,而 data()
更新内存中的对象。
我建议只使用 data()
:
toggle.toggleClass('fa-toggle-off text-red fa-toggle-on text-green');
if (action == 'enable') {
toggle.parent('span').data({
'action': 'disable',
'original-title': 'Non usare più questa anagrafica'
});
} else {
toggle.parent('span').data({
'action': 'enable',
'original-title': 'Riattiva questa anagrafica'
});
}