在页面中随机排序列表项时缺少元素

Missing elements when randomizing order of list items in page

本文关键字：元素 列表 排序 随机      更新时间：2023-09-26

我正在尝试为一个教育网站开发一个小测试，我想随机化问题和练习的顺序，然后在每个问题下用一组单选按钮排列答案的顺序。我已经在两个独立的问题(即这个和这个)上尝试了我找到的代码，尽管这两个答案实际上是相同的。我使用的代码在某种程度上是我想要的，但是我的测试有时会丢失部分内容(大多数时候我得到5个问题和2-3个练习，而不是6和4)。我该如何纠正这一点?这个JSFiddle中的完整代码示例(一些与后端无关的东西在那里，忽略它们-内容是占位符，以便更容易调试)，以及javascript/jQuery自己的代码如下:

$(document).ready(function () {
        var questions = $('.question');
        for (var i = 0; i < questions.length; i++) {
            var target = Math.floor(Math.random() * questions.length - 1) + 1;
            var target2 = Math.floor(Math.random() * questions.length - 1) + 1;
            questions.eq(target).before(questions.eq(target2));
        }
        var exercises = $(".exercise");
        for (var j = 0; j < exercises.length; j++) {
            var target = Math.floor(Math.random() * exercises.length - 1) + 1;
            var target2 = Math.floor(Math.random() * exercises.length - 1) + 1;
            exercises.eq(target).before(exercises.eq(target2));
        }
    });

注:#1:网站的后端是用Asp构建的。. Net和c#，如果这与问题有关的话。

注:#2:把小提琴放四到五次，数一数问题和练习的数量来重现问题。

我改变了你的代码，使target将不相同的target2:

JavaScript 

var questions = $('.question');
for (var i = 0; i < questions.length; i++) {
  var target = Math.floor(Math.random() * questions.length - 1) + 1;
  var target2 = target;
  while(target2 === target) {
    target2 = Math.floor(Math.random() * questions.length - 1) + 1;
  }
  questions.eq(target).before(questions.eq(target2));
}
var exercises = $(".exercise");
for (var j = 0; j < exercises.length; j++) {
  var target = Math.floor(Math.random() * exercises.length - 1) + 1;
  var target2 = target;
  while(target2 === target) {
    target2 = Math.floor(Math.random() * exercises.length - 1) + 1;
  }
  exercises.eq(target).before(exercises.eq(target2));
}

小提琴

我假设所有的.question/.exercise元素都在同一个父元素中。

我的做法是:

  1. 将问题/练习作为一个数组并将它们分离

  2. 随机化数组，在这个问题的答案中以几种方式解决

    3. 添加

例如:

function randomize(selector) {
  // Get the elements and their parent
  var elements = $(selector);
  var parent = elements.eq(1).parent();
  
  // Detach, get array
  elements = elements.detach().get();
  
  // Shuffle it
  shuffle(elements);
  
  // Attach
  parent.append(elements);
}
// From https://stackoverflow.com/a/2450976/157247
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
randomize(".question");
randomize(".exercise");
<ul>
  <li class="question">Question 1</li>
  <li class="question">Question 2</li>
  <li class="question">Question 3</li>
  <li class="question">Question 4</li>
  <li class="question">Question 5</li>
</ul>
Exercises:
<ul>
  <li class="exercise">Exercise 1</li>
  <li class="exercise">Exercise 2</li>
  <li class="exercise">Exercise 3</li>
  <li class="exercise">Exercise 4</li>
  <li class="exercise">Exercise 5</li>
  <li class="exercise">Exercise 6</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：