1

Имеется блок, внутри которого при нажатии на кнопку .color-pick__btn, на картинке с таким же data-number, должен присваиваться класс "active"

$(".color-pick__btn").click(function() {
  if ($(this).hasClass('active')) {
    return false;
  } else {

    $(".color-pick__btn", ).removeClass("active");
    $('.item-picture img', this).removeClass('active');
    $(this).addClass("active");
    $('.item-picture img[data-number="' + $(this).attr('data-number') + '"]').addClass('active');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-slide">
  <div class="item-picture">
    <img src="https://d.neoldu.com/gallery/2153_2.jpg" alt="" class="active" data-number="4">

    <img src="https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_640.jpg" alt="" data-number="5">
  </div>
  <div class="color-pick">
    <p>Bistfor</p>
    <div class="color-button">
      <div class="color-pick__btn active" data-number="4"></div>
      <div class="color-pick__btn" data-number="5"></div>
    </div>
  </div>
</div>

вот скрипт, который отлично справляется, если блок .item-slide на странице один.

Но если таких блоков несколько, class="active" убирается везде, во всех блоках.
Не понимаю, как сделать так, чтоб действие выполнялось только внутри блока, на кнопку внутри которого идет клик.

1 ответ 1

1

Вам надо использовать $(this).closest(".item-slide"), это найдёт текущий, ближайший item-slide и остальных детей искать уже от него.

var itemSlide = $(this).closest(".item-slide")

itemSlide.find(".color-pick__btn").removeClass("active");
// ...
3
  • Спасибо, помогло! 27 дек 2017 в 13:52
  • @VladislavKovaliov если вам помогло отметьте пожалуйста ответ как ответ, и буду благодарен за лайк. 27 дек 2017 в 14:23
  • пока не могу ставить лайки 27 дек 2017 в 17:57

Ваш ответ

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

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