как изменить стиль соседнего li при клике jquery?

Question

<div class="col-lg-3 col-md-6">
                <div class="single-details">
                    <div class="images">
                        <a href="{{url($product->slug)}}"><img src="{{ Voyager::image($product->image) }}" alt=""></a>
                        <div class="overley">
                            <div class="winners-details">
                                <ul class="product-info">
                                    <li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-compress" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="triangle_left"></div>
                    <h4><a href="{{url('/product/'. $product->slug)}}">{{$product->title}}</a></h4>
                    <div class="price-details">
                        <ul>
                            <li> {{$product->price}} грн</li>
                            <li> <a href="#" data-id="{{$product->id}}" class="add-to-cart">Добавить в корзину</a> </li>
                            <li class="added-show">Добавлено</li>
                        </ul>
                    </div>
                </div>
                <!-- .single-details end -->
            </div>

Вот так добввляет всем кнопкам а нужно только на ту которую нажали
$(".add-to-cart").click(function () {
                   
                    $('added-show').css('display', 'block');
                });

Спасибо!

Answer 1

Обратите внимание на комментарии
Так как элемент <a> с отслеживаемым при нажатии классом находится в li, то ищем родителя <a>, и от него берём следующий элемент.
Но лучше используйте toggle, чтобы переключать класс отображения. (Чтобы исчезал при следующем нажатии)

    $(".add-to-cart").click(function () {
        let z = $(this).parent(); // Так как <a> находится в li - получаем родителя
        let next = z.next();  // берём следующий элемент от полученного родителя
        next.css('display', 'block'); //отображаем
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .added-show {
        display: none;
    }
</style>
<div class="price-details">
    <ul>
        <li> 123 грн</li>
        <li> <a href="#" data-id="123" class="add-to-cart">Добавить в корзину</a> </li>
        <li class="added-show">Добавлено</li>
    </ul>
</div>
<div class="price-details">
    <ul>
        <li> 123 грн</li>
        <li> <a href="#" data-id="123" class="add-to-cart">Добавить в корзину</a> </li>
        <li class="added-show">Добавлено</li>
    </ul>
</div>

Если нужно, чтобы при повторном нажатии снова пропадала надпись "Добавлено" используйте toggle
Пример:

    $(".add-to-cart").click(function () {
        let z = $(this).parent();
        let next = z.next();
        next.toggle('added-show');
    });

    .added-show {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-details">
    <ul>
        <li> 123 грн</li>
        <li> <a href="#" data-id="123" class="add-to-cart">Добавить в корзину</a> </li>
        <li class="added-show">Добавлено</li>
    </ul>
</div>
<div class="price-details">
    <ul>
        <li> 123 грн</li>
        <li> <a href="#" data-id="123" class="add-to-cart">Добавить в корзину</a> </li>
        <li class="added-show">Добавлено</li>
    </ul>
</div>

БЛОГ НА HUSL

как изменить стиль соседнего li при клике jquery?

Ответы (1 шт):