jQuery добавить класс к следующему или предыдущему изображению - работает только один раз?

Question

Нажав кнопку «Далее» или «Предыдущая», я пытаюсь добавить класс («.active») к следующему или предыдущему изображению. Почему мой код в настоящее время работает только один раз - он добавляет класс к следующему изображению - и затем перестает работать?

Ссылка:

http://jordy.studio/paintings_new

$('#thumbnails').each(function() {
  $('#thumbnails').find('img').first().addClass('active');
});

$("#next").click(function() {
  $('#thumbnails').find('img').hasClass('active').removeClass('active').first().next('img').addClass('active');
});

$("#prev").click(function() {
  $('#thumbnails').find('img').removeClass('active').prev('img').first().addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails">
  <img class="active" src="img_01.jpg">
  <img class="      " src="img_02.jpg">
  <img class="      " src="img_03.jpg">
  <img class="      " src="img_04.jpg">
</div>

<footer>
  <p id="prev">prev</p>
  <p id="next">next</p>
</footer>

Попытка использовать jQuery .siblings привела к тому, что всем следующим изображениям был присвоен класс '.active'.

Просто потратил хороший ночью, пытаясь заставить это работать, я надеюсь, что кто-то может объяснить мне, что я делаю неправильно. Хотя энтузиаст по поводу jQuery опыта у меня мало. Каждый день - школьный день!

Answer 1

Проблема главным образом в том, что hasClass() возвращает логическое значение, указывающее, имеет ли элемент в коллекции предоставленный вами класс. Он не возвращает объект jQuery, поэтому вы не можете связать с ним другие методы.

Чтобы исправить это, вы можете сохранить один объект, содержащий все элементы img, затем filter() их, чтобы найти .active один.

Также обратите внимание, что вызов each() для селектора идентификаторов, как и для #thumbnails, является избыточным, поскольку в этом случае должен быть только один элемент с таким идентификатором. Если есть несколько, измените это на class селектор. Кроме того, вы должны установить класс active для элемента по умолчанию в HTML, так как выполнение этого в JS приведет к FOU C.

Со всем, что сказано попробуйте это:

let $img = $('#thumbnails img');

$("#next").click(function() {
  let $target = $img.filter('.active').removeClass('active').next();
  if ($target.length == 0)
    $target = $img.first();
  $target.addClass('active');
});

$("#prev").click(function() {
  let $target = $img.filter('.active').removeClass('active').prev();
  if ($target.length == 0)
    $target = $img.last();
  $target.addClass('active');
});

img {
  display: block;
  width: 25px;
  height: 25px;
  border: 1px solid #C00;
}

img.active {
  background-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails">
  <img src="img_01.jpg" class="active">
  <img src="img_02.jpg">
  <img src="img_03.jpg">
  <img src="img_04.jpg">
</div>

<footer>
  <p id="prev">prev</p>
  <p id="next">next</p>
</footer>