jQuery setInterval 持续更新数据属性

Question

我有一个 div class 名字 "tw_marquee_scroller" 。我想每 1 秒更新一次它的数据左值。例如，在第一秒，该值将是 10，然后是 20、30、40 ......我正在使用这段代码，但它一次又一次地返回 10。这有什么问题吗？

jQuery(document).ready(function($){

    $('.tw_marquee_scroller').attr('data-left', 0);

    setInterval(function(){
        var position = parseInt($('.tw_marquee_scroller').data('left'));
        var new_position = position + 10;
        $('.tw_marquee_scroller').attr('data-left', new_position);
        console.log(new_position);
    }, 1000);

});

Answer 1

也尝试用 data() 写 data 属性，而不是 attr():

$('.tw_marquee_scroller').data('left', 0);

setInterval(function(){
    var position = parseInt($('.tw_marquee_scroller').data('left'));
    var new_position = position + 10;
    $('.tw_marquee_scroller').data('left', new_position);
    console.log(new_position);
}, 1000);

Answer 2

为什么你没有以同样的方式取值？

jQuery(document).ready(function($){

    $('.tw_marquee_scroller').attr('data-left', 0);

    setInterval(function(){
        var position = parseInt($('.tw_marquee_scroller').attr('data-left'));
        var new_position = position + 10;
        $('.tw_marquee_scroller').attr('data-left', new_position);
        console.log(new_position);
    }, 1000);

});

Answer 3

将该行中的 data('left') 更改为：

 var position = parseInt($('.tw_marquee_scroller').attr('data-left'))

它会起作用

Answer 4

这是一种 window 污染更短的方法：

$( (function($) {
var scroller = $('.tw_marquee_scroller');

scroller.data('left', 0);

setInterval( function() {
    scroller.data('left', parseInt( scroller.data('left'), 10 ) + 10 );
    console.log( scroller.data("left") );
}, 1000 );

}(jQuery.noConflict())) )

jQuery setInterval 持续更新数据属性

jQuery setInterval to continuously update data attribute

javascript

jquery

setinterval