Очистить повторяющийся код JavaScript

Question

Я создал «Волшебника», используя JavaScript и основываясь на ответах людей, которых вы перенаправили на определенные результаты.Это работает так, как я хочу, но этот код ОЧЕНЬ повторяется.Есть ли способ очистить этот код 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();
};

Теперь вместо того, чтобы переходить к следующему вопросу, набирая всю вещь, вы можете просто передать номера вопросов в функцию и вызвать ее.

Конечно, может быть больше оптимизаций, вы должны реорганизовать код там, где это возможно. Приношу свои извинения за то, что слишком жестко обращался с вами, я думал, что вы использовали какой-то инструмент генерации кода. Надеюсь, это более полезно.