get wrong value in data attribute jquery

i have a div with data attribut like

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

and i have script like

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

});

with the script above the data-location attribute will be updated to 10, but if i click the button again, the data-location is still 1

Answers:

Answer

The first time that you use .data() to access a data-* attribute, the value of that attribute is cached internally by jQuery, and .data() uses the cache from then on. Updating the attribute with .attr() does not update the cache, you need to use .data() to update it. That's why you need to use

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

to update it.

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

is different than

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

so, use the second instead.

Check Data vs Attr for details.

Answer

you are setting the attr property and not data using .attr('data-location',count). to get the attribute you need to use .attr('data-location'):

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.