Kürzere Code für "wenn" Jquery-Bedingung

Question

Dieses Code-Snippet wird zum Anzeigen von 10 Fragen konsequent nacheinander verwendet und manipulieren jede Frage Sichtbarkeit durch CSS .hideme Klasse. Dann senden Sie die Messwerte an Google Analytics. Es funktioniert, sieht aber zu sperrig aus. Ich versuche, diesen Code in einem kürzeren (intelligenteren) Format umzuschreiben. Irgendwelche Vorschläge?

<script> 
    (function($) { 
    $(":input").change(function(){ 
     $(this).closest("div").addClass("hideMe"); 
     $(this).closest("div").next("div").removeClass("hideMe"); 

     if($('#q2').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 1 Answered'); 
     } 

     if($('#q3').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 2 Answered'); 
     } 

     if($('#q4').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 3 Answered'); 
     } 

     if($('#q5').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 4 Answered'); 
     } 

     if($('#q6').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 5 Answered'); 
     } 

     if($('#q7').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 6 Answered'); 
     } 

     if($('#q8').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 7 Answered'); 
     } 

     if($('#q9').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 8 Answered'); 
     } 

     if($('#q10').is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 9 Answered'); 
     } 

     if($('#results').is(':visible')) { 

      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question 10 Answered'); 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Results displayed'); 

      document.getElementById('answer1').innerHTML = $("input[name=qo1]:checked").val(); 
      document.getElementById('answer2').innerHTML = $("input[name=qo2]:checked").val(); 
      document.getElementById('answer3').innerHTML = $("input[name=qo3]:checked").val(); 
      document.getElementById('answer4').innerHTML = $("input[name=qo4]:checked").val(); 
      document.getElementById('answer5').innerHTML = $("input[name=qo5]:checked").val(); 
      document.getElementById('answer6').innerHTML = $("input[name=qo6]:checked").val(); 
      document.getElementById('answer7').innerHTML = $("input[name=qo7]:checked").val(); 
      document.getElementById('answer8').innerHTML = $("input[name=qo8]:checked").val(); 
      document.getElementById('answer9').innerHTML = $("input[name=qo9]:checked").val(); 
      document.getElementById('answer10').innerHTML = $("input[name=qo10]:checked").val(); 

      document.getElementById('total1').innerHTML = $('input.yes:checked').length; 
      document.getElementById('total2').innerHTML = $('input.yes:checked').length; 

      if($('input.yes:checked').length > 2) 
      { 
      $('#first').hide(); 
      $('#second').show(); 
      } 
      else 
      { 
      $('#first').show(); 
      $('#second').hide();**strong text** 
      } 
     } 
    }); 
    })(jQuery); 
    </script> 

Answer 1

jedem Checkbox eine Klasse und eine Schleife durch

$(".checkboxes").each(function(){ 
id = $(this).data("id"); 
if($('#q' + id).is(':visible')) { 
      ga('send', 'event', 'EnglishHearingWidget', 'question', 'Question ' + id + ' Answered'); 
     } 
}); 

-Update geben

hinzufügen Daten id = "Qn" zu jedem Optionsfeld. und verwende den obigen modifizierten Code. (I geändert ATTR auf Daten. Da die div, dass die ID haben und nicht den Radio-Button.

Answer 2

So Sie switch-Anweisung in Javascript verwenden können

switch ($foo) { 
case 'bar': 
    alert('bar'); 
    break; 
case 'bar2' 
    alert('bar2'); 
    break; 
default: 
    alert('foo'); 
}