清理重復的JavaScript代碼

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

現在不是通過輸入整個事物來改變下一個問題，而是可以將問題編號傳遞給函數並調用它。

當然可以有更多的優化，你必須盡可能地重構代碼。 我為你太難道歉，我以為你曾經使用過一些代碼生成工具。 希望這更有幫助。