javascript - get wrong value in data attribute jquery - Stack Overflow

admin管理员组

文章数量:1191725

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

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

• javascript
• jquery

Share Improve this question Follow edited Feb 5, 2015 at 3:45 Barmar 781k5656 gold badges545545 silver badges659659 bronze badges asked Feb 5, 2015 at 3:43 MamenMamen 1,43677 gold badges2222 silver badges4646 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 19

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.

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

is different than

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

so, use the second instead.

Check Data vs Attr for details.

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

I know this is an old question, but I'm visiting in 2022 and really this shouldn't be done in jQuery. The caching is a bad idea, and shouldn't need to update it using their magic method.

The best method for accessing data attributes is via the JavaScript element.dataset property.

By simply calling element.dataset rather than $(element).data(), you will always get the latest data object.

本文标签： javascriptget wrong value in data attribute jqueryStack Overflow