0

При нажатии на кнопку "В корзину" кнопки minus и plus добавляются ко всем элементам. Как сделать так чтобы она добавлялась только там, где было нажато на кнопку "В Корзину"?

$('.swiper__basket').click(function(){
    $(this).addClass('clicked');
    $('.swiper__minus').addClass('clicked');
    $('.swiper__plus').addClass('clicked');
});
.swiper {
    color: #fff;
    max-width: 1440px;

    &__card {
        max-width: 325px;
        height: 385px;
        background: linear-gradient(90deg, #494544 0%, #504B4A 100%);
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    &__img {
    
    }

    &__textbox{
        padding: 16px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    &__info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    &__name {
        font-weight: 700;
        font-size: 22px;
        line-height: 1.227;
    }

    &__weight {
        font-weight: 400;
        font-size: 12px;
        line-height: 1.166;
    }

    &__text {
        max-width: 250px;
        color: $text;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.307;
        flex: 1 1 auto;
    }

    &__action {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__minus, 
    &__plus{
        display: none;

        &.clicked{
            display: flex;
        }
    }

    &__price {
        font-weight: 600;
        font-size: 20px;
        line-height: 1.2;
    }

    &__basket {
        display: flex;  
        align-items: center;
        gap: 12px;
        transition: all 0.2s ease;

        &.clicked{
            display: none;
        }

        &:hover{
            box-shadow: 0px 5px 10px rgba(114, 163, 121, 0.7);
        }
    }

    &__basket-text {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.214;
    }

    &__basket-icon {
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-slide">
                            <div class="swiper__card">
                                <div class="swiper__img"><img src="img/sw_1.jpg" alt="Ягненок"></div>
                                <div class="swiper__textbox">
                                    <div class="swiper__info">
                                        <div class="swiper__name">Ягненок</div>
                                        <div class="swiper__weight">Вес: 225 г</div>
                                    </div>
                                    <div class="swiper__text">Фаршированный гречневой кашей,
                                        курагой, апельсином и зеленым яблоком</div>
                                    <div class="swiper__action">
                                        <div class="swiper__minus button">
                                            <img src="img/minus.svg" alt="remove">
                                        </div>
                                        <div class="swiper__price">620 ₽</div>
                                        <div class="swiper__plus button">
                                            <img src="img/plus.svg" alt="add">
                                        </div>
                                        <button class="swiper__basket button">
                                            <div class="swiper__basket-text">В корзину</div>
                                            <div class="swiper__basket-icon"><img src="img/basket.svg" alt=""></div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

1 ответ 1

0

Так происходит потому что ('.swiper__minus') Выбирает все элементы с данным классом. Вам надо выбирать один элемент, различить его можно добавив к важдому элементу id и по нему выбирая, примерно так:

var someElement= document.getElementById("myElement");
    someElement.className += " clicked"

Либо можно для всех детей текущего элемента добавить класс

 el = $(this);
    for (var i = 0; i < el.children.length; i++) {
    var child = el.children[i];
       child.addClass('clicked');
    }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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