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

Question

我做了一个快速的 fiddle 来显示这个问题: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/>'); 
});

演示:Fiddle

或者使用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/>');
});

演示:Fiddle