随机化 ul 标签不起作用

Question

这对你们来说可能是一个简单的问题，但我对编码还很陌生，无法弄清楚这个问题。我有一个代码，我想随机化问题中给定的选择，并且我在网上找到了一个可以执行此操作的脚本，但它不起作用。我不知道

// shuffle only elements that don't have "group" class
$ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function() {

意思是我尝试将所有不需要随机化的 ID 放入其中，但它仍然无法正常工作。有人可以帮我吗？还有无论如何我可以在每个给定的选项前面添加选择 "A"、选择 "B"、选择 "C" 和选择 "D"，所以即使在选项（答案）是随机的，A、B、C、D 选项仍然是有序的？谢谢你。这是代码：

HTML:

<!DOCTYPE html>
<html>
<body>
<script src="JQ.js"></script>
<script src="function.js"></script>
<link href="style.css" rel="stylesheet" />

    <div id="quiz_container">
      <ul class="quiz_container">
        <li class="single_question" data-question-id="1" data-correct-answer="1">
          <div class="question">
            <h1 class="title">P.1 Grammar Review</h1>
            <p class="text">1. "What is your name__"</p>
          </div>
          <ul class="options">
            <li value="1">?</li>
            <li value="2">.</li>
            <li value="3">,</li>
          </ul>
          <div class="result"></div>
        </li>
        <li class="single_question" data-question-id="2" data-correct-answer="b">
          <div class="question">
            <p class="text">2. "Do you like the banana__"</p>
          </div>
          <ul class="options">
            <li value="a">.</li>
            <li value="b">?</li>
            <li value="c">,</li>
          </ul>
          <div class="result"></div>
        </li>
    </div>
    </body>
</html>

JS:

 $(document).ready(function () {
     /*
      * shuffles the array
      * @param {Array} myArray array to shuffle
      */
     function shuffleArray(myArray) {
         for (var i = myArray.length - 1; i > 0; i--) {
             var j = Math.floor(Math.random() * (i + 1));
             var temp = myArray[i];
             myArray[i] = myArray[j];
             myArray[j] = temp;
         }

         return myArray;
     }

     var $ul, $li, li_content, li_list;

     // find all lists to shuffle
     $("#quiz_container > ul").each(function () {
         $ul = $(this);
         li_list = [];

         // shuffle only elements that don't have "group" class
         $ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function () {
             // add content to the array and remove item from the DOM
             li_list.push($(this).html());
             $(this).remove();
         });

         // shuffle the list
         li_list = shuffleArray(li_list);
         while (li_content = li_list.pop()) {
             // create <li> element and put it back to the DOM
             $li = $("<li />").html(li_content);
             $ul.append($li);
         }
     });

     $("#contact_div").show();
 });

 $(document).on('click', '.single_question .options li', function () {
     // Save the question of the clicked option 
     question = $(this).parents('.single_question');

     // Remove If Anyother option is already selected
     question.find('.selected').removeClass('selected');

     // Add selected class to the clicked li
     $(this).addClass('selected');

     // selected option value
     selected_answer_value = $(this).attr("value");

     // Value of correct answer from '.single-question' attribute
     correct_answer_value = question.attr("data-correct-answer");
     correct_answer_text = question.find('.options').find("li[value='" + correct_answer_value + "']").text();

     if (correct_answer_value == selected_answer_value)
         result = "<div class='correct'> Correct ! </div>";
     else
         result = "<div class='wrong'> Correct answer is -> " + correct_answer_text + "</div>";

     // Write the result of the question
     $(this).parents('.single_question').find('.result').html(result);

     // Calculate the score
     score_calculator();
 });

 /**
  * It loops through every question and increments the value when "data-correct-answer" value and "option's value" are same
  */
 function score_calculator() {
     score = 0;

     $('.single_question').each(function () {
         question = $(this);
         if (question.attr('data-correct-answer') == question.find('.selected').attr("value")) {
             score++;
         }
     });

     $('.correct_answers').html(score);
 }

Answer 1

看起来您正在使用 jQuery，即使问题没有这样标记。如果是这种情况，您可以使用 CSS-Tricks 的 Chris Coyier 编写的名为 shuffle children.

的代码片段

下面是一个实际代码示例。

$.fn.shuffleChildren = function() {
    $.each(this.get(), function(index, el) {
        var $el = $(el);
        var $find = $el.children();

        $find.sort(function() {
            return 0.5 - Math.random();
        });

        $el.empty();
        $find.appendTo($el);
    });
};

$("ul.randomized").shuffleChildren();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Static List:</h4>
<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
  <li>Fourth element</li>
</ul>

<h4>Randomized List:</h4>
<ul class="randomized">
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
  <li>Fourth element</li>
</ul>

为了将它应用到您自己的代码中，您需要做的就是修改 jQuery 片段底部的 CSS 选择器。在您的情况下，ul.options 可能是一个不错的选择。

以下是使用您的标记的几个示例：

随机化 ul 标签不起作用

radomize ul tag not working

html

javascript

random

options