jquery - 数据属性在 DOM 中更改但被 jQuery 忽略

Question

我做了一个快速的小提琴来显示这个问题：http: //jsfiddle.net/nm3Ma/1/

拿这个html：

<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="2"></div>
<div class="myclass" data-number="3"></div>

而这个js

$(".myclass").each(function(){      
    var number = $(this).data('number');
    if( number>1 )
    {
        $(this).attr('data-number', number-1 );
    }
    $('body').append($(this).data('number')+'<br/>'); 
});

该代码实际上将 HTML 更改为：

<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="2"></div>

但它仍然打印：

1
2
3

有人可以解释我做错了什么吗？谢谢你。

Answer 1

jQuery 使用内部数据结构来存储数据值，data-*如果在内部结构中找不到键，则使用属性来初始化数据值。因此，当您第二次读取该值时，它是从内部结构而不是属性中读取值，因此对属性所做的更改将不可见。

您需要使用.data()的 setter 版本来设置数据值

$(".myclass").each(function(){      
    var number = $(this).data('number');
    if( number>1 )
    {
        $(this).data('number', number-1 );
    }
    $('body').append($(this).data('number')+'<br/>'); 
});

演示：小提琴

或者使用attr()来读取和写入值

$(".myclass").each(function () {
    var number = $(this).attr('data-number');
    if (number > 1) {
        $(this).attr('data-number', number - 1);
    }
    $('body').append($(this).attr('data-number') + '<br/>');
});

演示：小提琴