Question

我想循环遍历div的集合，并在触发点击事件时随机淡出它们但是此刻我必须不断点击以淡化其他div。我宁愿点击一个div并使其所有div随机淡出。我已经在while循环中添加了一些console.logs，一切似乎工作正常，问题是当我尝试淡出实际元素时。如果有人能提供帮助那就太棒了？

在这里小提琴：http://jsfiddle.net/kyllle/sdpzJ/7/

Answer 1

我不确定我是否理解你的问题，但这是一个可能的解决方案：

function randomFadeOut(i){  
    var random;
    var e = 0;
    while (e < ctnLength) { 
        random = Math.random() * 1000;
        $(ctn[e]).not(i).delay(random).animate({ opacity : 0 });
        e++;
    }        
}

当你点击一个div时，这会随机淡出所有div。

I updated your fiddle here

Answer 2

您的随机数生成器在您的循环之外 - 所以您只能反复获得一个随机数。

试试这个：

 function randomFadeOut(i){  
        var random      
        for (var e=0;e<ctnLength;e++) {
            random = Math.floor(Math.random() * ctnLength);
            $(ctn[random]).not(i).animate({ opacity : 0 });
        }        
    }

当然，由于这是随机的，因此可以多次选择相同的细胞，这将留下许多细胞。

Answer 3

这是一个更好，更有效的randomFade函数：

function randomFadeOut(i){          
    var tmp = ctn.toArray();
    tmp.sort( function(){ return Math.floor( Math.random()*3 ) -1; } );
    for( var i=0; i<tmp.length; ++i ){
        $(tmp[i]).delay(100 * i).fadeOut();
    }
}

这样，你只能通过数组一次我更新了你的小提琴以及它的实际效果：）

Answer 4

也决定把它扔出去。简化。

$(function() {
    var $ctn = $('#container .ctn');

    function randomFadeOut() {
        var $r = $ctn.not($(this));
        var e = 0;
        while (e < $ctn.length) {
            $r.eq(e).delay(Math.random() * 500).animate({ opacity: 0 });
            e++;
        }
    }

    $ctn.hide().click(randomFadeOut).each(function(v) {
        $(this).delay(50 * v).fadeIn();
    });
});

http://jsfiddle.net/sdpzJ/15/

使用while循环遍历元素时遇到问题

4 个答案: