2011-06-22 30 views
5

Utworzyłem "Kreatora" przy użyciu JavaScript i na podstawie odpowiedzi ludzi zostajesz przeniesiony do pewnych wyników div. Działa tak, jak chcę, ale ten kod jest BARDZO powtarzalny. Czy istnieje sposób na oczyszczenie tego kodu JavaScript?Oczyść powtarzający się kod 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/

także, czy istnieje sposób, aby dodać „Powrót do Start” na wynikach div, który zabierze Cię z powrotem do początku i resetuje wszystkie przyciski radiowe?

Dziękujemy!

+5

Linki na żywo są świetnym * dodatkiem * do pytania, ale zawsze dodawaj odpowiedni kod * również w pytaniu * (nawet jeśli jest powtarzalny). Dwa powody. 1. Ludzie nie powinni podążać za linkiem, aby ci pomóc. 2. StackOverflow ma być zasobem nie tylko dla ciebie teraz, ale dla innych mających podobny problem w przyszłości. Linki zewnętrzne można przenosić, modyfikować, usuwać itp. Upewniając się, że odpowiedni kod jest w pytaniu, zapewniamy, że pytanie (i jego odpowiedzi) pozostanie użyteczne przez rozsądny okres czasu. –

+2

Wydaje się, że to należy do [codereview] (http://codereview.stackexchange.com/). – user113716

+0

Dodałem mój kod do pytania, ale dzięki za link. Opublikuję tam moje pytanie. – Dawn

Odpowiedz

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

To jest właściwie zupełnie niepotrzebne. Polecam że dodasz następującą regułę CSS zamiast:

.hidden{ 
    display : none; 
} 

Ale to nie wszystko, co jest złego w kodzie, będę brutalnie szczery jego okropne. Byłoby lepiej, gdybyś trochę się nauczył jQuery. Nie można naprawdę oczekiwać, że ludzie spędzają czas na optymalizowaniu kodu, który został wygenerowany przez jakiegoś czarodzieja.

Moja odpowiedź nie jest bardzo pomocna, ale trzeba by trochę więcej wysiłku, aby uzyskać przyzwoitą pomoc.

Edytuj Wygląda na to, że każda funkcja ma subtelne różnice, co utrudnia generalizowanie. dam ci sugestię napisać funkcję jak

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

Teraz zamiast zmieniać do następnego pytania, wpisując całą rzecz można po prostu przekazać numery pytanie funkcji i nazwać.

Oczywiście może być więcej optymalizacji, musisz korygować kod tam, gdzie to możliwe. Przepraszam, że jestem zbyt ostry, myślałem, że użyłeś jakiegoś narzędzia do generowania kodu. Mam nadzieję, że to będzie bardziej pomocne.

+1

Nie został wygenerowany przez jakiegoś czarodzieja, sam napisałem kod. I tak jak powiedziałem, nie jestem ekspertem od programowania z jQuery, dlatego miałem nadzieję przynajmniej uzyskać pomoc dotyczącą tego, gdzie szukać i na jaki kod powinienem patrzeć. Przez długi czas przeszukałem internet, próbując znaleźć kod, który jest podobny do tego, jak chcę, żeby działał, ale nie mogę. Widziałem 1 radio wybrane, 1 div show. Mogę to zrobić, ale sposób, w jaki mój kod musi działać, wydaje się nieco skomplikowany. Mówię tylko, że byłoby bardziej pomocne, gdybyś mógł mi powiedzieć, czego powinienem szukać, zamiast po prostu powiedzieć mi, że potrzebuję pomocy. – Dawn

+0

W tym przypadku wcale nie jest tak źle. Zaktualizuję moją odpowiedź za pomocą kodu, który możesz poprawić. – nikhil

+0

Wiem, że mogę dużo pytać, ale jeśli ktoś może po prostu spojrzeć na to, w jaki sposób działa mój kod (w linku do demo, który napisałem pod kodem) i powiedzieć mi, jak by to było z programowaniem, byłoby to pomocne. Może jQuery nie jest najlepszym sposobem, aby zrobić to skutecznie i można to zrobić lepiej przy użyciu innego języka programowania. Nie wiem Ale pomogłoby mi, gdybym miał jakiś kierunek. Dziękuję Ci! – Dawn

Powiązane problemy