jQuery setInterval持续更新数据属性

jQuery setInterval to continuously update data attribute

本文关键字：更新 数据属性 setInterval jQuery      更新时间：2023-09-26

我有一个div类名为"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);
});

试着用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);

为什么不以同样的方式获取值?

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

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

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

它会起作用

这里有一个更少污染窗口的更短的方法:

$( (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())) )
相关文章：