radomize ul标签不起作用

时间:2016-07-28 18:43:07

标签: javascript html random options

对于你们来说,这可能是一个简单的问题,但我对编码很新,并且无法弄清楚这一点。我有一个代码,我想在问题中随机选择给定的选项,我在网上找到了一个可以做到这一点的脚本,但是它没有用。我不知道

是什么
// 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);
 }

1 个答案:

答案 0 :(得分:0)

看起来你正在使用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可能是一个不错的选择。

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