jQuery取得資料屬性時得到錯誤的值

Question

我有一個帶有資料屬性的 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

Answer 1

第一次使用.data() 存取data-* 屬性時，該屬性的值由jQuery 內部緩存，並且 .data()從那時起就使用快取。使用.attr()更新屬性不會更新緩存，您需要使用.data()來更新它。這就是為什麼你需要使用

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

更新它。