jQuery obtient une mauvaise valeur lors de l'obtention de l'attribut de données

Question

J'ai un div avec des attributs de données

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

J'ai un script comme celui-ci

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

});

Avec le script ci-dessus, la propriété de position des données est mise à jour à 10, mais si je clique à nouveau sur le bouton, la position des données est toujours 1

Answer 1

Utilisez .data() 访问 data-* 属性时，该属性的值由 jQuery 内部缓存，并且 .data() 从那时起就使用缓存。使用.attr()更新属性不会更新缓存，您需要使用.data() pour la première fois pour le mettre à jour. C'est pourquoi vous devez utiliser

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

Mettez-le à jour.