Question

此代码段用于相互显示10个问题，并通过CSS .hideme类操作每个问题的可见性。然后将指标数据发送到Google Analytics。它有效，但看起来太笨重。我试图用更短（更聪明）的格式重写这段代码。有什么建议吗？

  <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

给每个复选框一个类并循环遍历

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

<强>更新

将data-id =“qN”添加到每个单选按钮。并使用上面修改过的代码。（我将ATTR更改为DATA。因为div将具有该ID而不是单选按钮。

Answer 2

所以你可以在Javascript中使用switch语句

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

“if”Jquery条件的更短代码

2 个答案: