2016-04-11 3 views
-2

Этот фрагмент кода используется для отображения 10 вопросов последовательно друг за другом и управления каждым вопросом видимости с помощью класса CSS .hideme. Затем отправить данные показателей в Google Analytics. Он работает, но выглядит слишком громоздким. Я пытаюсь переписать этот код в более коротком (умном) формате. Какие-либо предложения?Более короткий код для «if» JQuery condtion

<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> 
+7

Видите ли вы какие-либо модели есть? Можете ли вы представить себе путь повторить этот шаблон в цикле ['for'?] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) –

+0

Я ставлю такую ​​структуру, как' {q5: «Question 4 Answer», ...} 'может хранить все ваши данные, тогда вы можете зациклиться на этом. – tadman

+1

Спасибо за быстрый ответ. Я вижу шаблон, но не знаю, как на самом деле написать его с помощью« for loop », – Laziz

ответ

0

дать каждой CheckBox класс и проходной

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

Update

Добавить данные идентификатор = "QN" для каждой кнопки радио. и используйте вышеуказанный модифицированный код. (Я изменил ATTR в DATA. Поскольку DIV будет иметь этот идентификатор, а не переключатель.

+0

Как вы знаете, что элементы '# qN' - это флажки? –

+0

Большое спасибо! Я попробую. – Laziz

+0

Я фактически предположил, что #qN - это div, обертывающий флажок. Однако @Blazemonger прав, недостаточно информации, поэтому это было главным образом предположениями. – imvain2

0

Таким образом, вы можете использовать переключатель заявление в Javascript

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