1

我想要一个简单的预加载 Html 移动测验，通过 jQuery 使用显示/隐藏 div 一次在屏幕上显示一个问题

当用户需要跳过一两个问题时，问题就来了，我想通过设置标志来做到这一点，如果我应该根据用户选择/选项值/答案显示该 div

我在这里找到了解决方案，但我真正需要的是一种带有标志的简单方法来知道是否应该显示下一个 q2skipped=true div q2skipped=false

如果它没有显示，那么它会去测试q3skipped标志

我在这里在 jsfiddle 中做了一个例子：

<div class="question" id="question1">Q.1 Do you like Milk 
    <select name="1" onchange="displayElements(this.value);" >
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option >Goto Next Question</option>
        <option value="q2skipped=true">Skip Next Question</option>
        <option value="q2skipped=true;q3skipped=true">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" id="button" value="Submit" onclick='doSubmit(this)'>
    </div>
</div>
4

2 回答 2

2

似乎需要一种更可重复的方法。硬编码所有问题的所有值是一项烦人的任务，如果您必须创建一个新测验，您将不得不重复这一点。

我不了解您的应用程序的全部范围，但我会给您一些一般性提示，以帮助您走上更清洁的解决方案。

(1) 使用类来设计你的问题。例如，您可以使用以下 CSS：

 .answered { background-color: green;  }
 .skipped  { background-color: yellow; }

如果您在回答后隐藏问题，CSS 将无关紧要，但它确实有助于证明我的观点。

(2) 避免在 HTML 中使用硬编码值（当然问题编号除外） 类似：

<div class="question" id="question1">Q.1 Do you like Milk 
    <select class="answer">
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option value="skip">Goto Next Question</option>
        <option value="skip_one">Skip Next Question</option>
        <option value="skip_two">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" value="Submit" onclick='doSubmit(1)'>
    </div>
</div>

我看到你id="button"在提交按钮上使用。这是一个相当糟糕的主意，因为 ID 应该是唯一的。如果不需要，最好的方法是不要在按钮上提及 ID。

另请注意，按钮的 onclick 事件现在传递问题的 ID。以后会清楚的。

我在选择中添加了一个“答案”类，以便您稍后可以轻松检索用户的答案。

我还用选择按钮省略了 onclick 和 name 属性。我不确定 onclick 事件应该做什么（与这个问题无关？）并且 name 属性在这里似乎并不需要（同样，如果这个问题中没有提到的东西需要它，你可以添加它再次）。

(3) 使用 javascript/jQuery 来定义应该发生的事情。

$(document).ready(function() {
    //These things should occur on page load:

    $(".question").hide(); //Hides all questions
    $("#question1").show(); //Bring back the first question.
});

//The rest will be done in the doSubmit() function:

function doSubmit (questionID) {
    //get the value from the <select> in the div
    var question = $("#question"+questionID);
    var answer = question.find(".answer").val();

    var nextquestionID = 0; //will be set in the switch case.

    switch(answer) {

        case "yes":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "no":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "skip":
            question.addClass("skipped");
            nextquestionID = questionID + 1;
            break;

        case "skip_one":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");

            nextquestionID = questionID + 2;

            break;

        case "skip_two":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");
            var skippedquestionID_2 = questionID + 2; //also the next one will be marked as skipped
            $("#question" + skippedquestionID_2 ).addClass("skipped");

            nextquestionID = questionID + 3;
            break;

    }

    //Whatever was selected, now the original question must be hidden, and the new question (ID is contained in nextquestionID ) should be shown:
    question.hide();
    $("#question" + nextquestionID).show();
}

这应该让您进一步构建一个可重复的过程来处理用户的答案。我希望我能够说得足够清楚，以便您理解；如果没有，请随时询问:-)

于 2012-11-12T15:11:16.897 回答
1

您可以根据需要使用 jquery .addClass()、.removeClass() 和 .hasClass() 函数来装饰 div。

IE

  $('#q1').addClass('skipped')    //when they skip a question
  $('#q1').removeClass('skipped') //when they finally answer it

  if ($('#q1').hasClass('skipped')===true) //test if a question was skipped.
  {

  }  .... etc
于 2012-11-12T13:42:12.083 回答