nhận được giá trị sai trong thuộc tính dữ liệu jquery

Question

tôi có một div với dữ liệu attribut như

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

và tôi có kịch bản như

$('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(); 

}); 

với kịch bản trên thuộc tính dữ liệu vị trí sẽ được cập nhật 10, nhưng nếu tôi nhấp lại vào nút, vị trí dữ liệu vẫn là 1

Answer 1

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

khác với

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

vì vậy, hãy sử dụng thứ hai thay thế.

Kiểm tra Data vs Attr để biết chi tiết.

Answer 2

bạn đang đặt thuộc tính attr và không sử dụng dữ liệu .attr('data-location',count). để có được những thuộc tính bạn cần phải sử dụng .attr('data-location'):

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

Answer 3

Lần đầu tiên bạn sử dụng .data() để truy cập một thuộc tính data-*, giá trị của thuộc tính được lưu trữ nội bộ bởi jQuery, và .data() sử dụng bộ nhớ cache từ đó trở đi. Cập nhật thuộc tính với .attr() không cập nhật bộ nhớ cache, bạn cần sử dụng .data() để cập nhật. Đó là lý do tại sao bạn cần sử dụng

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

để cập nhật.