使用Java腳本隨機化Div標籤

我環顧四周，已經能夠找到一段代碼來完成這項工作，但它並不適用於我的所有標籤。我總共有8個Div標籤，我想隨機化，這段代碼只允許我隨機化其中的7個。如果我用8替換7，它只是按順序顯示一切。我不經常使用JavaScript，並且遇到了障礙。任何幫助是極大的讚賞。使用Java腳本隨機化Div標籤

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".workPiece").hide(); 

    var elements = $(".workPiece"); 
    var elementCount = elements.size(); 
    var elementsToShow = 7; 
    var alreadyChoosen = ","; 
    var i = 0; 
    while (i < elementsToShow) { 
     var rand = Math.floor(Math.random() * elementCount); 
     if (alreadyChoosen.indexOf("," + rand + ",") < 0) { 
      alreadyChoosen += rand + ","; 
      elements.eq(rand).show(); 
      ++i; 
     } 
    } 
}); 
</script>

來源

2011-03-09 Andrew McNeil

爲了使所有元素都能夠工作，您需要實際移動元素來對其進行隨機播放，而不是隨意隱藏其中一些元素。

下面是一個例子jQuery插件做到這一點：

(function($) { 
    $.fn.shuffle = function(selector, limit) { 
    if (limit !== undefined) { 
     limit -= 1; 
    } 
    return this.each(function() { 
     var $this = $(this); 
     var nodes = $this.children(selector).show().remove().get(); 
     while (nodes.length > 0) { 
     var i = Math.floor(Math.random() * nodes.length); 
     $this.append(nodes.splice(i, 1)); 
     } 
     if (limit !== undefined) { 
     $this.children(selector + ':gt(' + limit + ')').hide(); 
     } 
    }); 
    }; 
})(jQuery);

你叫它像這樣：

$('.grid-8').shuffle('.workPiece');

您可以限制可見孩子的數量，像這樣：

$('.grid-8').shuffle('.workPiece', 4);

這是jsFiddle for it。

來源

2011-03-11 18:35:13

我看着jsFiddle，它的效果很好，但是當我把它放在網站上時，它因爲某種原因停下來。我注意到，我給了你錯誤的類名稱，它是「grid_8」，但我一定要改變它，它仍然無法正常工作。 [這jsFiddle]（http://jsfiddle.net/Ltbq6/4/）看起來更像是什麼實際的網站 – 2011-03-11 19:20:09

我不知道爲什麼它不適合你 - 即使是你鏈接作品的jsFiddle。有沒有可能在任何地方上傳站點代碼？ – 2011-03-11 19:43:08

這是我正在處理的[page]（http://www.heilbrice.com/index_random_div.php）。 – 2011-03-11 19:47:26

一個Fisher-Yates shuffle的This implementation似乎工作得很好：

//+ Jonas Raoni Soares Silva 
//@ http://jsfromhell.com/array/shuffle [rev. #1] 

shuffle = function(v){ 
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
    return v; 
}; 

// Shuffle DIVs 
$(document).ready(function() { 
    console.log(shuffle($('div'))); 
});

來源

2011-03-09 23:59:16 Ori

試試這個

var elements = $(".workPiece"); 
while (elements.length) { 
    var rand = Math.floor(Math.random() * elements.length); 
    elements.eq(rand).show(); 
    elements = elements.not(':eq(' + rand + ')'); 
}

但我不知道這是否會工作。

來源

2011-03-10 00:09:31 jcubic

這很聰明！我不得不修改它以使其工作：http://jsfiddle.net/noonat/sXRX4/ – 2011-03-10 00:12:46

這是荒謬的，你得到了一個優雅的解決方案downvote。我投票贊成。非常聰明。 – Ori 2011-03-10 00:43:04

+1優雅！ – DashK 2011-03-10 12:18:30

使用Java腳本隨機化Div標籤

回答

相關問題