隨機訂單Divove

我有一個有100多個問題的測驗。當問題加載時，只有50個問題顯示。其餘的都是隱藏的。我使用下面的代碼：隨機訂單Divove

CSS

.question{ 
    display:none; 
}

HTML

<div class="question"> 
    <!-- Code for Each Question --> 
</div> 

<!-- Repeat 'question div' for every question. -->

var divs = $("div.question").get().sort(function(){ 
    return Math.round(Math.random())-0.5; 
}).slice(0,50) 
$(divs).show();

上面的代碼很好，但是，而不是隻顯示50個問題，我想以隨機順序顯示50個問題。我如何修改我的代碼，以便不僅僅顯示50個問題，而是以隨機順序顯示它們？

我應該注意到上面的JS是從另一個問題使用的。我不完全理解Math.random()並且不確定如何隨機顯示它顯示的50個div。

注：解決方案必須是純粹的客戶端代碼。

來源

2014-03-05 L84

是問題的硬編碼的HTML，或通過PHP說服務器加載？ – j08691

@ j08691 - 它們在頁面中被硬編碼。 – L84

[選擇5個隨機元素]的可能重複（http://stackoverflow.com/questions/1764160/select-5-random-elements） –

要重新排列頁面上的div，您需要按照洗牌順序重新添加它們。你現在正在做的是獲取元素，選擇其中的50個，並顯示這些元素（按隨機順序排列，但不改變他們在dom中的位置）。

代替$(divs).show();使用

$(divs).appendTo(questionContainer).show();

還要注意的shouldn't use sort() to shuffle an array。

來源

2014-03-05 01:48:15 Bergi

簡單的解決方案，效果很好！感謝'sort（）'提示。 – L84

第一，創建包含0-99（如果有100個問題）

var arr = new Array(); 
for(var i=0; i < 100; i++){ 
arr[i] = i; 
}

然後洗牌陣列

var shuffle = function(o){ //v1.0 
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
}; 
var shuffled = shuffle(arr);

然後依次通過所述混洗陣列示出了第一50.

陣列

for(var i = 0; i < 50; i++){ 
var thisOne = $($("div.question")[shuffled[i]]); 
thisOne.parent().append(thisOne); 
    thisOne.show(); 
    }

我不能保證這會複製粘貼和工作，但它應該讓你開始。

來源

2014-03-05 01:40:33 box86rowh

這不完全是OP想要的。他們已經有50個隨機顯示，他們需要做的是將其重新排列在頁面上。 –

好的，添加的代碼不僅可以顯示隨機問題，還可以將其添加到顯示列表的末尾，從而對其重新排序。 – box86rowh

這聽起來像你實際上想要移動頁面上的元素。

假設的問題是一個div容器內，這樣的事情可能做的伎倆：

var $divs = $("div.question").sort(function(){ 
    return Math.round(Math.random())-0.5; 
}).slice(0,4) 

// remove them 
$divs.detach(); 

// reposition them 
$('#questionContainer').append($divs); 

// show 
$divs.show();

來源

2014-03-05 01:48:17

隨機訂單Divove

回答

相關問題