繰り返し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(); 

これは実際にはほとんど必要ありません。

.hidden{ 
    display : none; 
} 

をしかし、それはあなたのコードと一緒に間違っていることすべてが、私はそのひどい残酷に正直になるだろうではありません： 私はあなたの代わりに、以下のCSSルールを追加することをお勧めします。あなたがjQueryを学ぶために少しでも努力した方が良いでしょう。 ここでは、いくつかのウィザードによって生成されたコードの最適化に時間を費やすことは、ここでは期待できません。

私の答えは本当に役立つものではありませんが、まともな助けを得るためには少し努力する必要があります。

編集 各機能に微妙な違いがあるように見えますが、一般化するのが難しくなります。 は、私はあなたの提案の代わりにあなただけの関数に質問番号を渡し、それを呼び出すことができ、全体の事を入力して、次の質問に変更するので今

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

のような関数を記述を与えるでしょう。

さらに最適化することができますが、可能であれば、コードをリファクタリングする必要があります。 あまりにもハードなことをお詫び申し上げます。コード生成ツールを使用したと思います。 これがより役に立ちそうですか？