限制 for 循环结合 if 语句 jQuery答案

【问题标题】：Limiting a for Loop combined with a if statement jQuery限制 for 循环结合 if 语句 jQuery
【发布时间】：2013-11-06 13:39:06
【问题描述】：

我的 for 循环与 if 语句相结合时遇到了一个小问题我想通过图像计数，让它们一个接一个地淡入或淡出所以让我们看看我的代码：

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if( status === 'none' ){
    for (i; i < count; i++){
        $('.thumb:eq('+i+')').delay(i*100).fadeIn(500);
    }
}
else {
    for (i; i > limit; i--){
        $('.thumb:eq('+i+')').delay(i*100).fadeOut(500);
    }
}
});

我计算了图像的数量（var count）我想在我的 for 循环中使用这个数字。这么久这么好；） fadeIn 工作完美，但 fadeOut 没有。根本没有错误消息或任何我可以使用的东西。有什么想法吗？

这是标记：

<button id="motive-toggler" class="standard hover">m</button>
<div id="motive-wrapper">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
</div>

感谢任何帮助

【问题讨论】：

$('.thumb').css('display') 只会返回集合中第一个元素的值。如果代码运行时不隐藏则永远不会返回none
详细解释想要的行为。还在jsfiddle.net中设置demo
这是小提琴jsfiddle.net/sNXb5

标签： jquery loops if-statement for-loop fadeout

【解决方案1】：

在fadeOut 的for 循环中，您没有给i 一个初始值。试试：

for (i = count - 1; i >= limit; i--) {

而不是

for (i; i > limit; i--){

更新：

如果您希望它们以相反的顺序淡出，请尝试：

for (i = count - 1; i >= limit; i--){
    var fadeOrder = count - i - 1; // thumb 3 will go first, then thumb 2, etc
    $('.thumb:eq('+i+')').delay(fadeOrder*100).fadeOut(500);
}

实际上，你循环遍历拇指的方式并不重要，重要的是你给每个拇指的延迟时间。所以你可以这样做：

for (i = 0; i < count; i++){
    var fadeOrder = count - i - 1; // thumb 3 will go first, then thumb 2, etc
    $('.thumb:eq('+i+')').delay(fadeOrder*100).fadeOut(500);
}

【讨论】：

我爱你们！现在它可以为您提供快速帮助！ :) 但我还有另一个问题：它从 0 开始淡入到 3 结束，但为什么它没有从 3 开始淡入并以 0 结束？并扭转了我会赞成但我在这里新的技巧
@BillBronson 我添加了一个更新，它将以相反的顺序淡出
完美运行！再次感谢，祝你有美好的一天:)
@BillBronson 不客气，你也一样。如果此（或此处的其他答案）对您有用，请将其标记为已接受的答案。

【解决方案2】：

您的变量i 以值0 开头；然后你做一个while i > limit 然后你做i--。

但即使在第一次运行时，i == limit，所以i > limit 的计算结果为false，并且您的循环不会被执行。

【讨论】：

【解决方案3】：

我和其他答案差不多。

limit 和 i 一样是 0。 else 语句中的 for 循环永远不会开始循环。

这是一个包含您的代码的 JSFiddle，但有一些错误修正以使其正常工作。玩得开心。

HTML：

<button id="motive-toggler" class="standard hover">m</button>
<div id="motive-wrapper">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
</div>

CSS：

.thumb{
    display:none;
}

JS：

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if( status === 'none' ){
    for (i; i < count; i++){
    $('.thumb:eq('+i+')').delay(i*100).fadeIn(500);
}}else{
    i = count;
    for (i; i >= limit; i--){
    $('.thumb:eq('+i+')').delay(i*100).fadeOut(500);
}}
});

来源：http://jsfiddle.net/B5ZYJ/7/

【讨论】：

【解决方案4】：

您的淡出从前面开始，而不是相反。这是因为当您淡出时，您从 3 开始，然后是 2、1、0。而您的 delay(i*100) 正在执行 delay 300, 200, 100, 0，所以如果您输入 (count - i - 1)，那么您的延迟将翻转并变成 delay 0, 100, 200, 300

http://jsfiddle.net/dLS4e/1

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if ( status === 'none' ) {
    for (var i = 0; i < count; i++){
        $('.thumb:eq('+i+')').delay( i * 100 ).fadeIn(500);
    }
} else {
    for (var i = count - 1; i >= limit; i--) {
        $('.thumb:eq('+i+')').delay( (count - i - 1) * 100).fadeOut(500);
    }
}

});

【讨论】：