Question

我有一个有100多个问题的测验。当问题加载时，只有50个问题显示出来。其余的都是隐藏的。我使用以下代码：

的 CSS 的

.question{
   display:none;
}

的 HTML 的

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

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

的 JS 的

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。

注意：解决方案必须是纯客户端代码。

Answer 1

要重新排序页面上的div，您需要以随机顺序重新添加它们。你现在正在做的是获取元素，选择其中的50个并显示它们（按随机顺序，但不改变它们在dom中的位置）。

而不是$(divs).show();使用

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

另请注意shouldn't use sort() to shuffle an array。

Answer 2

首先，创建一个包含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();
    }

我不能保证这会复制粘贴和工作，但它应该让你开始。

Answer 3

听起来你真的想在页面上移动元素。

假设问题在容器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();

随机有序Div

3 个答案: