如何从while循环中获取当前商品单价？jQuery+PHP技术求助

嘿，我明白你现在的困惑啦！问题出在你获取价格的方式上——现在你直接用$('.update-price-price-form').find(...)会选中页面上所有商品的价格元素，最终只会拿到第一个商品的价格，而不是你点击的那个商品对应的单价。

问题根源 #

你的PHP是在while循环里逐个输出商品的数量控件和价格控件，每个商品的这两个控件应该属于同一个“商品项容器”，但你现在的代码里没有把它们包裹在一个共同的父元素里，而且jQuery也没定位到当前点击按钮所属的那个商品项，所以拿不到对应价格。

修复步骤 #

1. 给每个商品添加统一的父容器

修改你的PHP/HTML代码，把每个商品的数量表单和价格表单都包裹在一个统一的父容器里（比如cart-item类）：

// while循环内部代码
extract($row); 
// 新增：每个商品的外层容器，用来关联数量和价格控件
echo "<div class='cart-item'>";
// 更新数量功能的表单
echo "<div class='update-quantity-form'>"; 
echo "<a class='update-quantity' data-id='{$id}'>-</a>"; 
echo "<div class='cart-quantity'>{$quantity}</div>"; 
echo "<a class='update-quantity' data-id='{$id}'>+</a>"; 
echo "</div>"; 
// 价格显示区域
echo "<div class='update-price-price-form'>"; 
echo "&#8364;<span class='cart-price-price'>{$price}</span>"; 
echo "</div>"; 
echo "</div>"; // 闭合商品外层容器

2. 修改jQuery代码，精准定位当前商品的价格

点击按钮时，先通过closest()找到当前按钮所属的商品外层容器，再在这个容器里找对应的价格元素：

$(".update-quantity").click(function(e){ 
    e.preventDefault(); // 阻止a标签默认跳转行为，避免页面刷新
    var $currentBtn = $(this);
    var id = $currentBtn.data('id'); 
    // 获取当前商品的数量（原有逻辑正确，因为数量和按钮在同一个表单内）
    var quantity = $currentBtn.closest('.update-quantity-form').find('.cart-quantity').text(); 
    // 关键修改：先定位到当前商品的外层容器，再在内部查找对应价格
    var price = $currentBtn.closest('.cart-item').find('.update-price-price-form .cart-price-price').text(); 
    console.log("当前商品单价: "+price); 

    // 后续可以添加AJAX逻辑，计算小计并更新页面
    /*
    $.ajax({
        url: '你的计算脚本.php', // 替换为你的PHP文件路径
        method: 'POST',
        data: {
            product_id: id,
            quantity: quantity,
            unit_price: price
        },
        success: function(result) {
            // 假设你有一个显示小计的元素（比如class为cart-subtotal）
            $currentBtn.closest('.cart-item').find('.cart-subtotal').text('€' + result);
        }
    });
    */
});

为什么这样可行？ #

• closest('.cart-item')会从当前点击的按钮开始向上查找最近的带有cart-item类的父元素，也就是当前操作的商品的外层容器。
• 然后在这个容器内部查找价格元素，就能精准拿到当前商品的单价，而不是全局的第一个价格。

这样修改后，你点击每个商品的+/-按钮时，console.log就能输出对应商品的单价啦，后续的AJAX计算也能基于正确的数据进行~

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