无法使用 AJAX 获取不同产品的 ID答案

【问题标题】：Cannot fetch ID of different products with AJAX无法使用 AJAX 获取不同产品的 ID
【发布时间】：2019-02-04 09:57:22
【问题描述】：

我正在尝试使用 PHP 和 AJAX 创建一个电子商务网站，但我似乎无法在我的商店视图中获取产品的 ID。例如，我的商店有 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>";

下面是相同的 AJAX

$('.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，请问如何解决？

【问题讨论】：

使用$(this).closest('input.hidden-id').val(); 而不是$('.hidden-id').val();
@spinsch 现在得到“未定义”
使用$(this).closest('.product-image-hover').find('input.hidden-id').val(); 而不是$(this).closest('input.hidden-id').val();

标签： javascript php ajax

【解决方案1】：

尝试在添加到购物车按钮中添加一个名为：data-val的属性，并将动态id属性添加到类为：hidden-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>";

$('.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);
});

【讨论】：