只能使HTML列表洗牌一次

Can only make HTML list shuffle once

本文关键字：一次 HTML 列表      更新时间：2023-09-26

我对编码完全陌生，所以如果我的问题很愚蠢，请耐心等待（请把任何答案都写成代码，否则我不会得到…）。我正在Qualtrics调查页面上工作，在那里我有两个可选答案-每个答案都是一个项目列表。我正在尝试打乱列表，以便每个参与者以不同的顺序查看它们。我从网上得到了这些代码。

我的HTML列表如下：

<div id="enriched">
    <div class="list_item">lots of sunshine</div>
    <div class="list_item">gorgeous beaches and coral reefs</div>
    <div class="list_item">ultra-modern hotel</div>
    <div class="list_item">very cold water</div>
    <div class="list_item">very strong winds</div>
    <div class="list_item">no nightlife</div>
</div>

而我的javascript代码是这样的：

var list = document.getElementById("enriched");
function shuffleNodes() {
    var nodes = list.children, i = 0;
    nodes = Array.prototype.sort.call(nodes);
    while(i < nodes.length) {
       list.appendChild(nodes[i]);
       ++i;
    }
}
shuffleNodes();

然而，它只对原始版本的列表进行了一次洗牌。在那之后，每一个下一个参与者都只看到了那个版本，没有发生进一步的洗牌。之后，我需要以某种方式使它也适用于这两个列表。。我有点压力。

我还尝试了一个数组代码，但无法使其工作。

正如函数名所示，nodes = Array.prototype.sort.call(nodes);行不会打乱内容，而是对其进行排序。因此，每次都会得到一致的排序。

您可能想看看如何随机化（搅乱）JavaScript数组？用于混洗实现。

这应该创建一个新的random_list数组：

var random_list = [];
for ( i = 0; i < nodes.length; i ++ ) {
  random_list.push( nodes[i].innerHTML );
}
random_list.sort( function() {
  return Math.random() - 0.5;
});
相关文章：