ottenere il valore sbagliato nel attributo data jquery

Question

ho un div con i dati Attribut come

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

e ho script come

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

}); 

con lo script sopra l'attributo data-localizzazione sarà aggiornato a 10, ma se clicco di nuovo il pulsante, i dati-posizione è ancora 1

Answer 1

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

è diverso

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

quindi, utilizzare il secondo invece.

Controllare Data vs Attr per dettagli.

Answer 2

si sta impostando la proprietà attr e non i dati utilizzando .attr('data-location',count). per ottenere l'attributo è necessario utilizzare .attr('data-location'):

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

Answer 3

La prima volta che si utilizza .data() ad accedere a un attributo data-*, il valore di tale attributo viene memorizzato nella cache internamente da jQuery, e .data() utilizza la cache da allora in poi. L'aggiornamento dell'attributo con .attr() non aggiorna la cache, è necessario utilizzare .data() per aggiornarlo. Ecco perché è necessario utilizzare

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

per aggiornarlo.