在数据属性jquery中得到错误的值答案

【问题标题】：get wrong value in data attribute jquery在数据属性jquery中得到错误的值
【发布时间】：2015-02-05 03:43:02
【问题描述】：

我有一个带有数据属性的 div，比如

<div class='p1' data-location='1'></div>

我有类似的脚本

$('button').click(function(){

    var loc = $('.p1').data('location');
    alert('data location is'+loc);//SHOW THE DATA

    var num = 10;
    var count = loc;
    var element = $('.p1');
    var intv = setInterval(anim,1000); 
    function anim(){
        count++;
        num--;
        if(count==37){count = 1;}
        if(num==1){clearInterval(intv);}
        $(element).animateCSS('bounceOut',{
            callback: function(){
                $(element).attr('data-location',count);
                $(element).animateCSS('bounceIn');
            }
        });

    }
    anim();

});

使用上面的脚本，数据位置属性将更新为 10，但如果我再次单击按钮，数据位置仍然是 1

【问题讨论】：

标签： javascript jquery

【解决方案1】：

第一次使用.data() 访问data-* 属性时，该属性的值由jQuery 内部缓存，.data() 从那时起使用缓存。用.attr()更新属性不会更新缓存，需要用.data()更新。这就是为什么你需要使用

$(element).data('location', count);

更新它。

【讨论】：

【解决方案2】：

        $(element).attr('data-location',count);

不同于

        $(element).data('location',count);

所以，请改用第二个。

查看Data vs Attr了解详情。

【讨论】：

【解决方案3】：

您正在使用 .attr('data-location',count) 设置 attr 属性而不是数据。要获取您需要使用的属性.attr('data-location'):

var loc = $('.p1').attr('data-location');

【讨论】：

我遇到了类似的问题，因为一个项目与从 DOM 中删除的项目的 id 相同，但缓存仍然保留旧值。使用 attr 访问值解决了问题