Question

我有大约72个班级=＆＃34;框＆＃34;

这些是覆盖我整个页面的一些黑色的盒子，我希望在完成我的功能之后逐个删除这些分区。

我正在做的是随机删除这些盒子，

function removeBoxes(){

    var erase;
            //var to store the length of array of divisions
    var total = $(".box").length;
    while(total > 0)
    {
              //generating a random number
        erase = Math.floor(Math.random() * total);
        $(".box").eq(erase).fadeOut(10000, function(){
            $(this).remove();
        });
        total = $(".box").length;
    }
}

稍后我还会在两次删除之间添加一些时间延迟，但是现在我只想知道如何逐个删除这些框。

Answer 1

一个小插件怎么样：

(function($) {
    $.fn.random = function() {
        var n = this.length;
        var r = Math.floor(n * Math.random());
        return n ? $(this[r]) : $();
    };
})(jQuery);

用法：

(function iterate() {
    $('.box').random().fadeOut(1000, function() {
        $(this).remove();
        iterate();
    });
})();

元素将一次消失一个，当没有.box个元素时，循环将自动终止。

请参阅http://jsfiddle.net/alnitak/cddhL/了解演示。

Answer 2

function removeBoxes(){

    var total = $(".box").length - 1;
    var randomnumber = Math.floor(Math.random()*total);
    jQuery(".box:eq('"+randomnumer+"')").fadeOut(1000, function() {
        $(this).remove();
    });
}

//这是每5秒删除一次DIV

setInterval(function(){ 
    removeBoxes();    
}, 5000);

我希望这可以帮助:)

Answer 3

你已经知道如何在淡出后触发某些东西，即在你已经删除了盒子的回调中进行操作。而不是使用循环，编写一个只删除一个随机框的函数，并在回调中调用它。

示例：

function removeRandomBox() {
  var boxes = $(".box"); // don't repeatedly search for the boxes
  var total = boxes.length;
  if (length > 0) {
    var erase = Math.floor(Math.random() * total);
    boxes.eq(erase).fadeOut(10000, function(){
       $(this).remove();
       removeRandomBox();
    });
  }
}

如何使用jquery随机删除同一类的元素

3 个答案: