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

Я создал «Мастер» с использованием 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/

Кроме того, есть ли способ добавить кнопку «Назад к началу» в разделах результатов, которая возвращает вас к началу и сбрасывает все переключатели?

Благодарю вас!


person Dawn    schedule 22.06.2011    source источник
comment
Активные ссылки являются отличным дополнением к вопросу, но также всегда публикуйте соответствующий код в вопросе (даже если он повторяется). Две причины. 1. Люди не должны переходить по ссылке, чтобы помочь вам. 2. StackOverflow предназначен не только для вас сейчас, но и для других, у которых возникнет аналогичная проблема в будущем. Внешние ссылки могут быть перемещены, изменены, удалены и т. д. Убедившись, что соответствующий код присутствует в вопросе, мы гарантируем, что вопрос (и ответы на него) останутся полезными в течение разумного периода времени.   -  person T.J. Crowder    schedule 22.06.2011
comment
Кажется, это относится к codereview.   -  person user113716    schedule 22.06.2011
comment
Я добавил свой код в вопрос, но спасибо за ссылку. Я размещу свой вопрос там.   -  person Dawn    schedule 22.06.2011
comment
Как я ответил на: stackoverflow.com/questions/6378814 /wizard-start-over-buttons/   -  person Kalle H. Väravas    schedule 18.09.2011


Ответы (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();
};

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

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

person nikhil    schedule 22.06.2011
comment
Его не сгенерировал какой-то волшебник, я сам написал код. И, как я уже сказал, я не являюсь опытным программистом с jQuery, поэтому я надеялся, по крайней мере, получить помощь в том, где искать или какой код мне следует искать. Я долго искал в Интернете, пытаясь найти код, который хотя бы похож на то, как я хочу, чтобы мой работал, но я не могу. Я видел 1 выбранное радио, 1 див-шоу. Я могу это сделать, но способ, которым должен работать мой код, кажется немного сложным. Я просто говорю, что было бы полезнее, если бы ты сказал мне, что мне искать, а не просто сказал, что мне нужна помощь. - person Dawn; 22.06.2011
comment
В таком случае все не так уж и плохо. Я обновлю свой ответ некоторым кодом, который вы можете улучшить. - person nikhil; 22.06.2011
comment
Я знаю, что могу многого спросить, но если кто-нибудь может просто посмотреть, как мой код работает сейчас (в демонстрационной ссылке, которую я разместил под кодом), и сказать мне, как они будут программировать это, это было бы полезно. Возможно, jQuery — не лучший способ сделать это эффективно, и это можно сделать лучше с другим типом языка программирования. Я не знаю. Но было бы лучше, если бы у меня было какое-то направление движения. Благодарю вас! - person Dawn; 22.06.2011
comment
Вы можете сделать все это с помощью jQuery, с его помощью ничего не получится. Ключ должен сгруппировать похожий код, а затем увидеть, где возможны обобщения. И многого не просите. Я не должен был так предполагать. Мои извинения еще раз. - person nikhil; 22.06.2011
comment
Спасибо. Да, я думаю, что моя проблема с написанием этого кода заключается в том, что существует так много тонких различий, что я чувствую, что НЕ МОГУ обобщать его, и что я должен быть конкретным в отношении того, к какому вопросу ведет вас каждый переключатель. Next_question зависит от того, какой переключатель был выбран перед ним. Таким образом, если было выбрано радио 1, оно может привести к вопросу 2, радио 2 может привести к вопросу 5, а радио 3 может привести к вопросу 6. И так будет продолжаться до тех пор, пока не попадет на страницу результатов. - person Dawn; 22.06.2011