Невозможно получить ID разных продуктов с AJAX

Question

Я пытаюсь создать сайт электронной коммерции с PHP и AJAX, но я не могу получить идентификаторы продуктов в моем представлении магазина.Например, в моем магазине есть 3 товара с идентификаторами 1,2,3 соответственно, и теперь при нажатии кнопки «Добавить в корзину» я хочу получить идентификатор.Для этого я использую AJAX

. Я испробовал несколько различных методов, и я включаю свой текущий код ниже.Проблема в том, что когда я нажимаю кнопку «Добавить в корзину», он выбирает только идентификатор первого продукта, т.е. 1 независимо от того, какой продукт был добавлен в корзину.

echo "<div class='col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12'>
                                                    <div class='product-item'>
                                                        <div class='product-image-hover'>
                                                            <a href='product-details.php?id=$id' id='theLink' data-id='$id'>
                                                                <img class='primary-image' src='$realimg' alt=''>
                                                            </a><input type='text' class='hidden-id' value='$id' hidden>
                                                            <div class='product-hover'>
                                                                <button type='button' class='add-to-cart'><i class='icon icon-FullShoppingCart' ></i></button>
                                                                <a href='#'><i class='icon icon-Heart'></i></a>
                                                                <a href='#'><i class='icon icon-Help'></i></a>
                                                            </div>
                                                        </div>
                                                        <div class='product-text'>
                                                            <h4><a href='product-details.php?id=$id'>$name</a></h4>
                                                            <div class='product-price'><span>INR $price</span></div>
                                                        </div>
                                                    </div>
                                                </div>";

AJAX для того жеОН НИЖЕ

$('.add-to-cart').click(function() {
    var quantity = 1;
    var id = $('.hidden-id').val();
    alert("Product id is " + id + " and quantity is: " +quantity);
});

При нажатии кнопки «Добавить в корзину» выдается «Идентификатор продукта 1, а количество 1». Независимо от того, на какую кнопку продукта я нажимаю, идентификатор всегда равен 1, какя могу решить это?

Answer 1

Попробуйте добавить атрибут с именем: data-val в кнопку добавить в корзину и добавить динамический атрибут id к тексту с классом: hidden-id likeниже.И используйте эти атрибуты в скрипте.

PHP

echo "<div class='col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12'>
    <div class='product-item'>
    <div class='product-image-hover'>
        <a href='product-details.php?id=$id' id='theLink' data-id='$id'>
        <img class='primary-image'  alt='sss'>
        </a><input type='text' class='hidden-id' id='hidden_$id' value='$id' hidden>
        <div class='product-hover'>
        <button type='button' class='add-to-cart' data-val='$id'>Add to cart</button>
        <a href='#'><i class='icon icon-Heart'></i></a>
        <a href='#'><i class='icon icon-Help'></i></a>
        </div>
    </div>
    <div class='product-text'>
        <h4><a href='product-details.php?id=$id'>$name</a></h4>
        <div class='product-price'><span>INR $price</span></div>
    </div>
    </div>
    </div>";

JS

$('.add-to-cart').click(function() {
    var quantity = 1;
    var clickedProdId = $(this).attr('data-val');
    var id = $('#hidden_'+ clickedProdId).val();
    alert("Product id is " + id + " and quantity is: " +quantity);
});