如何在jQuery中点击相同类名元素获取对应商品ID？迷你商店数量修改与加购问题

你的问题核心在于获取商品ID的方式不对——$(".Single_Product").attr("id")只会返回DOM中第一个.Single_Product元素的ID，不管你点击哪个按钮，拿到的都是第一个商品的ID。

要解决这个问题，我们需要从当前点击的按钮出发，向上找到它所属的那个.Single_Product容器，再获取该容器的ID。下面是修改后的完整代码，我会标注关键改动：

$(document).ready(function(){
    // Creating ajax request to get all items from the server
    $.ajax({
        type: "POST",
        url: "https://api.cleverchoice.cc/",
        dataType: "json",
        success: function(response){
            var html = '';
            response.forEach(function(data){
                html += '<div class="col-sm-6 col-md-3 Single_Product" id="'+data["id"]+'">'+
                        '<div class="card mb-4 box-shadow">'+
                        '<img class="card-img-top" src="'+ data["image"] +'" data-holder-rendered="true">'+
                        '<div class="card-body">'+
                        '<p class="card-text cc-name">'+data["name"]+'</p>'+
                        '<div class="d-flex justify-content-between align-items-center">'+
                        '<div class="btn-group">'+
                        '<div class="Qty_Box">'+
                        '<span class="Qty_Minus">-</span>'+
                        '<input class="qty_value" type="text" value="1" name="qty">'+
                        '<span class="Qty_Plus">+</span>'+
                        '</div>'+
                        '<label for="cart_drawer_action" class="btn btn-sm btn-outline-secondary add_to_cart">Add to cart</label>'+
                        '</div>'+
                        '<small class="text-muted price">'+data["currency"]+data["price"]+'</small>'+
                        '</div>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
            });
            $(".Product_List").append(html);

            // Adding quantity
            $(".Qty_Plus").click(function(){
                // 关键改动：从当前点击的+按钮向上找最近的.Single_Product容器
                var $product = $(this).closest(".Single_Product");
                var id = $product.attr("id");
                console.log(id);
                // 优化：直接从当前按钮的兄弟元素获取输入框，不用通过ID查找
                var qtyInput = $(this).siblings(".qty_value");
                var i = qtyInput.val() * 1 + 1;
                qtyInput.val(i);
            });

            // Decrease quantity
            $(".Qty_Minus").click(function(){
                var $product = $(this).closest(".Single_Product");
                var id = $product.attr("id");
                var qtyInput = $(this).siblings(".qty_value");
                if(qtyInput.val() != 1){
                    var i = qtyInput.val() * 1 - 1;
                    qtyInput.val(i);
                }
            });

            // Add to cart
            $(".add_to_cart").click(function(){
                var $product = $(this).closest(".Single_Product");
                var id = $product.attr("id");
                console.log(id);
                // 优化：从$product容器内直接查找元素，比全局ID查找更高效
                var image = $product.find(".card-img-top").attr("src");
                var name = $product.find(".cc-name").html();
                var qty = $product.find(".qty_value").val();
                var price = $product.find(".price").html();
                
                html = '<div class="Cart_Item">'+
                        '<div class="Cart_Img"><img src="'+ image +'" alt="product"/></div>'+
                        '<div class="Cart_Name"><p>'+ name +'</p></div>'+
                        '<div class="Cart_Qty"><p>'+ qty +'</p></div>'+
                        '<div class="Cart_Price"><p>'+ price +'</p></div>'+
                        '<div class="Cart_Total"><p>'+ (parseFloat(price.replace(/[^0-9.]/g, '')) * qty).toFixed(2) +'</p></div>'+
                        '</div>';
                $(".Cart_Items").append(html);
            });
        }
    });
});

关键改动说明： #

1. 获取当前商品容器：使用$(this).closest(".Single_Product")，$(this)指代当前被点击的按钮，.closest()会向上遍历DOM树，找到最近的匹配.Single_Product的父元素，这样就能精准定位到当前按钮所属的商品容器。
2. 优化元素查找：不再通过全局ID查找输入框或商品信息，而是从当前商品容器$product内用.find()查找，或者用.siblings()直接找兄弟元素，代码更高效且避免ID冲突。
3. 购物车总价计算：额外帮你加了总价计算（解析价格后乘以数量），让购物车功能更完整（可根据需求调整或移除）。

另外，你原代码里购物车有两个重复的Cart_Price，我改成了Cart_Qty和Cart_Total，让结构更合理，你可以根据实际需求调整。

内容的提问来源于stack exchange，提问作者Stefan Momcilovic