Question

早上好，

我试图从div到div（从右到左）循环，然后重复。问题是我无法正确重复。我已经盯着这段代码好几个小时了，不能找出一个改变底部数字的简单方法。

循环正确迭代变量，但不能正确重置。结果是1,2,3,4,5（然后）2,3,4,5,2。它永远不会返回1.任何想法？

我尝试过以下方法： 1）改变底部i =（i == 5）？2：i + 1;到i =（i == 5）？1：i + 1;它确实正确地移动div，但然后完全停止循环并且根本不进行迭代。所有值都更改为1,1,1,1,1。

2）我试过在循环之外迭代循环无济于事。

3）设置jsFiddle：http://jsfiddle.net/covetech/awSLb/6/#&togetherjs=Msll5jT8qh

以下是我要做的事情：

CSS：

.menuItem1:after{
    content: 'Text 1';
}
.menuItem2:after{
    content: 'Text 2';
}
.menuItem3:after{
    content: 'Text 3';
}
.menuItem4:after{
    content: 'Text 4';
}
.menuItem5:after{
    content: 'Text 5';
}

Jquery的：

var x = 0;
while (x<5){
    var i = 1;
    function changeClass(){

        $("#menuItem-item").removeClass("menuItem" + i)
        i = (i==5)?2:i+1;    
        $("#menuItem-item").addClass("menuItem" + (i));

        $("#menuItem-item1").removeClass("menuItem" + i)
        i = (i==5)?2:i+1;    
        $("#menuItem-item1").addClass("menuItem" + (i));

        $("#menuItem-item2").removeClass("menuItem" + i)
        i = (i==5)?2:i+1;    
        $("#menuItem-item2").addClass("menuItem" + (i));

        $("#menuItem-item3").removeClass("menuItem" + i)
        i = (i==5)?2:i+1;    
        $("#menuItem-item3").addClass("menuItem" + (i));

        $("#menuItem-item4").removeClass("menuItem" + i)
        i = (i==5)?2:i+1; 
        $("#menuItem-item4").addClass("menuItem" + (i));
    }
i = 1;
setInterval(changeClass, 3000);

Answer 1

你的jQuery有几个问题。

首先，你的while循环条件会检查x，但是x永远不会在循环中更新，所以你的循环将永远存在。

其次，你在while循环中声明了var i，所以底部i = 1的重置几乎是多余的，因为你每次迭代都重新声明它。您应该只是在循环外部将其声明为顶部重置一次。

var x = 0;
var i = 1;
while (x<5){
    i = 1;
    ...

第三，你函数中的最后一个remove类：

$("#menuItem-item4").removeClass("menuItem" + i)
i = (i==5)?2:i+1;
$("#menuItem-item4").addClass("menuItem" + (i));

如果你追踪你的代码（特别是遵循i中的更改），你会发现i已经是5，所以它会变为2，而不是回到1.所以发生了什么事情你是i=5的removeClass（），然后条件将i更改为2，并且你为i=2添加了classClass（）。也许您应该将i的条件设置为menuItem-item4：

$("#menuItem-item4").removeClass("menuItem" + i)
if(i==5)i=1
$("#menuItem-item4").addClass("menuItem" + (i));

最后，通过编辑问题，我可以看到setInterval()在while循环中。正确关闭while循环并仅运行setInterval()一次。

...
} // <-- add this so the setInterval is out of the while loop.
setInterval(changeClass, 3000);

Answer 2

使用一些JQuery魔法。

append()从其父级中删除所选元素，并将其添加到该行末尾的新父级。

所以这样的事情应该会产生预期的效果。

HTML：

<div id="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

使用Javascript：

function changeClass() {
    var $first = $('#container div').first();
    $('#container').append($first);
}

setInterval(changeClass, 3000);

在Div之间滚动文本的jQuery循环

2 个答案: