时间戳

首页 > 解决方案 > 无法使用 AJAX 获取不同产品的 ID

javascript - 无法使用 AJAX 获取不同产品的 ID

问题描述

我正在尝试使用 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，我该如何解决这个问题？

标签： javascriptphpajax

解决方案

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

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

推荐阅读