无法获取不同的产品与AJAX的ID

Question

我试图做一个电子商务网站使用PHP和AJAX，但我似乎无法在我店以获取产品的标识。例如，我的店里有3种产品的ID分别为1,2,3和现在的“加入购物车”按钮的点击，我希望获取的ID。对于我使用AJAX

我尝试了好几种不同的方法，我在下面，包括我当前的代码。问题是，当我点击“加入购物车”按钮，它只取的第一个产品的ID，即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>";

出于同样的阿贾克斯低于

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

在单击添加到购物车按钮，输出为“产品ID为1，数量是1”不管我点击什么样的产品按钮，该ID总是1，我该怎么解决这个问题？

Answer 1

尝试添加称为属性：数据-VAL到添加到购物车按钮，添加动态id属性与类文本：隐藏-ID像下面。并使用该脚本属性以及。

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);
});