Question

我使用JavaScript创建了一个“向导”，并根据人们的答案将你带到某些结果div。它按我想要的方式工作，但这段代码非常重复。有没有办法清理这个JavaScript代码？

$(".hidden").hide();

$(function() {

    $("#start_button").click(function(){
            $("#wizard_start").hide();
            $("#Q1").show();
    });

$("#reset").click(function(){
        $("#wizard_start").show();
        $(".hidden").hide();
        $(":input").not(":button, :submit, :reset, :hidden").each( function() {
        this.value = this.defaultValue;     
});

});

$("#q1_button").click(function(){
        if ($("input[value='q1_1']:checked").val()){
            $("#Q2").show();
            $("#Q1").hide();
        }
        else if ($("input[value='q1_2']:checked").val()) {
            $("#results1").show();
            $("#Q1").hide();
        }
        else if ($("input[value='q1_3']:checked").val()) {
            $("#Q3").show();
            $("#Q1").hide();
        }
});

$("#q2_button").click(function(){
        if ($("input[value='q2_1']:checked").val()){
            $("#results2").show();
            $("#Q2").hide();
        }
        else {
            $("#results3").show();
            $("#Q2").hide();
        }


});

    $("#q3_button").click(function(){
        if ($("input[value='q3_1']:checked").val()){
            $("#Q4").show();
            $("#Q3").hide();
        }
        else {
            $("#results1").show();
            $("#Q3").hide();
        }

});

$("#q4_button").click(function(){
        if ($("input[value='q4_1']:checked").val()){
            $("#Q5").show();
            $("#Q4").hide();
        }
        else {
            $("#Q6").show();
            $("#Q4").hide();
        }

});

$("#q5_button").click(function(){
        if ($("input[value='q5_1']:checked").val()){
            $("#results4").show();
            $("#Q5").hide();
        }
        else {
            $("#Q7").show();
            $("#Q5").hide();
        }

});

$("#q6_button").click(function(){
        if ($("input[value='q6_1']:checked").val()){
            $("#Q8").show();
            $("#Q6").hide();
        }
        else {
            $("#Q9").show();
            $("#Q6").hide();
        }

});

$("#q7_button").click(function(){
        if ($("input[value='q7_1']:checked").val()){
            $("#results4").show();
            $("#Q7").hide();
        }
        else {
            $("#results5").show();
            $("#Q7").hide();
        }

});

$("#q8_button").click(function(){
        if ($("input[value='q8_1']:checked").val()){
            $("#results6").show();
            $("#Q8").hide();
        }
        else {
            $("#results7").show();
            $("#Q8").hide();
        }

});

$("#q9_button").click(function(){
        if ($("input[value='q9_1']:checked").val()){
            $("#results8").show();
            $("#Q9").hide();
        }
        else if ($("input[value='q9_2']:checked").val()) {
            $("#Q10").show();
            $("#Q9").hide();
        }

        else if ($("input[value='q9_3']:checked").val()) {
            $("#results3").show();
            $("#Q9").hide();
        }

});

$("#q10_button").click(function(){
        if ($("input[value='q10_1']:checked").val()){
            $("#results9").show();
            $("#Q10").hide();
        }
        else {
            $("#results3").show();
            $("#Q10").hide();
        }

});

$("#q2_backbutton").click(function(){
    $("#Q1").show();
    $("#Q2").hide();
});
$("#q3_backbutton").click(function(){
    $("#Q1").show();
    $("#Q3").hide();
});
$("#q4_backbutton").click(function(){
    $("#Q3").show();
    $("#Q4").hide();
});
$("#q5_backbutton").click(function(){
    $("#Q4").show();
    $("#Q5").hide();
});
$("#q6_backbutton").click(function(){
    $("#Q4").show();
    $("#Q6").hide();
});
$("#q7_backbutton").click(function(){
    $("#Q5").show();
    $("#Q7").hide();
});
$("#q8_backbutton").click(function(){
    $("#Q6").show();
    $("#Q8").hide();
});
$("#q9_backbutton").click(function(){
    $("#Q6").show();
    $("#Q9").hide();
});
$("#q10_backbutton").click(function(){
    $("#Q9").show();
    $("#Q10").hide();
});

});

http://jsfiddle.net/dswinson/PXp7c/56/

此外，有没有办法在结果div上添加“返回开始”按钮，将您带回到开头并重置所有单选按钮？

谢谢！

Answer 1

$(".hidden").hide();

这实际上是非常不必要的。我建议您添加以下CSS规则：

.hidden{
  display : none;
}

但是你的代码并不是那么糟糕，我会非常诚实地说它太糟糕了。如果你努力学习jQuery会更好。你真的不能指望这里的人花时间优化由某个向导生成的代码。

我的回答并不是很有帮助，但为了得到体面的帮助，你需要自己付出更多的努力。

编辑您的每个功能似乎都有微妙的差异，因此难以概括。我会给你一个建议写一个像

这样的函数

function switch_question(current_question,next_question){
  $('#Q'+current_question).hide();
  $('#results'+current_question).show().hide(10000);
  $('#Q'+next_question).show();
};

现在不是通过输入整个事物来改变下一个问题，而是可以将问题编号传递给函数并调用它。

当然可以有更多的优化，你必须尽可能地重构代码。我为你太难道歉，我以为你曾经使用过一些代码生成工具。希望这更有帮助。

清理重复的JavaScript代码

1 个答案: