在数据属性jquery中获取错误的值

我有一个数据属性的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(); }); 

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

Answer 1

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

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

更新它。

Answer 2

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

不同于

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

所以，改用第二个。

检查Data vs Attr以获取详细信息。

Answer 3

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

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