2

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

  $('.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')
  });
2
  • Элементов с каждым классом section-X сколько штук? По одному на класс или может быть несколько? И есть ли ещё <a> кроме представленных?
    – Regent
    17 апр 2018 в 10:26
  • Всего 6. По одному на класс. а тоже 6 17 апр 2018 в 10:31

3 ответа 3

2

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

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

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

2
  • Увы, не проверял. Вы правы, следовало бы наверное писать .not( $(this) ).
    – Quazimorda
    17 апр 2018 в 10:39
  • Вы снова правы, сейчас исправлю код.
    – Quazimorda
    17 апр 2018 в 10:58
1
['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')
  });
});
0

Если нужно добавлять/удалять класс "всем <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>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.