Подскажите как сократить код на jQuery (событие при hover)

185

18 апреля 2018, 07:30

Доброго времени суток. Подскажите, пожалуйста как сократить код?

  $('.section-first').hover(function() {
    $('#primary a:not(.section-first)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-first)').removeClass('swing')
  });
  $('.section-second').hover(function() {
   $('#primary a:not(.section-second)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-second)').removeClass('swing')
  });
  $('.section-third').hover(function() {
    $('#primary a:not(.section-third)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-third)').removeClass('swing')
  });
  $('.section-fourth').hover(function() {
     $('#primary a:not(.section-fourth)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-fourth)').removeClass('swing')
  });
  $('.section-fifth').hover(function() {
     $('#primary a:not(.section-fifth)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-fifth)').removeClass('swing')
  });
  $('.section-sixth').hover(function() {
     $('#primary a:not(.section-sixth)').addClass('swing')
  }, function() {
    $('#primary a:not(.section-sixth)').removeClass('swing')
  });

Answer 1

Если нужно добавлять/удалять класс "всем <a> в контейнере кроме данного", то можно сделать так:

var $links = $("#primary a"); 
$links.hover(function() { 
  $links.not(this).addClass("swing"); 
}, function() { 
  $links.not(this).removeClass("swing"); 
});

.swing { 
  color: red; 
}

<div id="primary"> 
  <a href="">First</a> 
  <a href="">Second</a> 
  <a href="">Third</a> 
  <a href="">Forth</a> 
  <a href="">Fifth</a> 
  <a href="">Sixth</a> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Может глупость напишу, но думаю так:

$('#primary a').hover(function() {
  $('#primary a').not(this).toggleClass('swing');
});

Этот код проверил. Работает. ))

Answer 3

['first', 'second', 'third', 'fourth', 'fifth', 'sixth'].forEach(counter => {
  $(`.section-${counter}`).hover(function() {
     $(`#primary a:not(.section-${counter})`).addClass('swing')
  }, function() {
    $(`#primary a:not(.section-${counter})`).removeClass('swing')
  });
});