Имеется блок, внутри которого при нажатии на кнопку .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"
убирается везде, во всех блоках.
Не понимаю, как сделать так, чтоб действие выполнялось только внутри блока, на кнопку внутри которого идет клик.