@Tigronix

Как правильно заюзать siblings?

Всем привет и заранее спасибо. Скрипт работает, но нужно, чтобы .active добавлялся только одному диву, а у остальных убирался. Где я ошибся?
Сейчас при нажатии .active всем добавляется, а потом всех удаляется. Как сделать, чтобы тот на который кликнули класс не терял, а у остальных класс убирался?

<div class="galery">
    <div class="slider-for">
        <div class="item"><img class="img-base" src="img/gal1.jpg" alt=""></div>
    </div>
    <div id="slider-nav" class="slider-nav">
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product2.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product3.jpg" alt=""></div>
        <div class="item nav-item"><img class="img-tp" src="img/gal2.jpg" data-bigimg="img/product.jpg" alt=""></div>
    </div>
</div><!--galery-->

$('.img-tp').click(function(){
    var srcimg = $(this).data('bigimg');
    $('.img-base').attr('src', srcimg);
    $('.nav-item').addClass('active').siblings().removeClass('active');
});
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergey-gornostaev
@sergey-gornostaev
Седой и строгий
Во-первых, нет элементов класса .nav-item. На сколько я понимаю, речь идёт об .item. Во-вторых, устанавливаете класс .active, а убираете .act. Наконец, самое важное, вы выбираете все div.item, и выполняете цепочку операций на всех, а не только на том, на котором произошёл клик.

$('.img-tp').click(function() {
  $(this).parent().addClass('active').siblings().removeClass('active');
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы