Javascript 有没有办法在测验中为div设置简单的标志来隐藏问题？

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

当用户需要跳过一两个问题时就会出现问题， 我想通过设置是否显示该div的标志来实现这一点 根据用户选择/选项值/答案

我在这里找到了解决方案，但我真正需要的是一个简单的 使用标志来知道是否应该显示下一个div

q2skipped=true

或

q2skipped=false

如果未显示，则将转到test

q3skipped

标志

我在JSFIDLE中做了一个例子：

Q.1你喜欢牛奶吗
对
不
转到下一个问题
跳过下一个问题
跳过接下来的两个问题

您可以根据需要使用jquery.addClass（）、.removeClass（）和.hasClass（）函数来修饰div

i、 e

---

似乎有必要采用一种更具可重复性的方法。对所有问题的所有值进行硬编码是一项烦人的任务，如果您必须创建一个新的测验，您必须重复这一点

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

（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>

---

这将进一步帮助您构建一个可重复的过程来处理用户的答案。我希望我能把事情说清楚，让你明白；如果没有，请随时询问：-）

您是否对选项值进行了硬编码？或者它们是在页面加载中动态构建的吗？选项值将是硬编码的，你应该考虑尝试一种更可重复的方法。我会给你一个答案和一些技巧来帮助你，给我几分钟：）看起来很有趣，有没有一个基本的例子？（jsfiddle？）注意：我没有包含任何代码将先前跳过的问题标记为已回答，因为在您的示例中没有代码可以实际返回到该元素。但是，如果我的解释足够清楚，那么在创建返回到跳过的问题的方法时，您应该能够轻松地添加它。

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

<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>

$(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();
}