При нажатии на кнопку "В корзину" кнопки 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>