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

IT技术 javascript jquery
2021-01-27 22:04:00

我有一个带有数据属性的 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

3个回答

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

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

更新它。

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

不同于 

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

所以，改用第二个。

有关详细信息，请检查数据与属性。

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

var loc = $('.p1').attr('data-location');
我遇到了类似的问题，因为一个项目的 ID 与从 DOM 中删除的项目相同，但缓存仍保留旧值。使用 attr 访问值解决了问题
2021-04-08 22:04:00
其它你可能感兴趣的问题
上一篇JavaScript replace() 方法美元符号 下一篇Typescript/ES7 中异步/等待的有限并行性