Question

是否可以更改div项list中的值。

示例：

我有一个包含项目的列表：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

我已经空div我需要放置值

<div id="output"></div>

如何循环列表项（li）并将值放入#output，延迟时间为5秒。一旦循环完成，需要从开始开始并进入无限。循环也不应该使浏览器崩溃。

此外，还有许多列表和输出div。

Answer 1

关于OP脚本，发布在问题评论中：

function doTimeOut(x) { 
    setTimeout(function() { 
        $('#output').html(x) 
    }, 600); 
} 
$(function() { 
    var items = $('.list li') for(var x = 0; x <= items.length; ++x) { 
        if(x == items.length) {
            // you start the loop over again here: 
            x = 0; 
        } else { 
            // you're updating the #output div x times in basically same time:
            doTimeOut(x); 
        } 
    } 
});

上述方法无效，只是因为当for循环达到最高x时，x被设置为 0 （{ {1}}）并重新开始重复计算。因此浏览器崩溃了。

This是使用您的方案修复的脚本。但就此而言，没有理由将 setTimeout 和用于循环。请改用 setinterval 。类似的东西：

x = 0;

<强> JSFiddle

Answer 2

我这样做了：

HTML：

<div class="row">
    <div class="cell">
        <ul class="list">
            <li>Item</li>
            <li>Item 2</li>
        </ul>
        <div class="output"></div>
    </div>
</div>

JS：

$('.row .cell').each(function(){
    var wrapper = $(this);
    var maxValue = wrapper.find('.list li').length
    var currentValue = 1;

    var item = wrapper.find('.list li')[0]

    if(maxValue >= 2) {
        wrapper.find('.output').html(item.innerText).delay(5700).fadeOut(300);
        function getValues() {
            if(currentValue == maxValue) {
                currentValue = 0;
            }
            var item = wrapper.find('.list li')[currentValue]   
            wrapper.find('.output').html(item.innerText).fadeIn(300).delay(5400).fadeOut(300);
            currentValue++;
        }
        setInterval(getValues, 6000);
    } else {
        wrapper.find('.output').html(item.innerText);
    }
 });

jQuery无限值随着延迟而改变

2 个答案: