如何让PHP变量在jQuery each循环中对应购物车各商品库存

问题情况 #

你现在碰到的问题是：购物车里只有一件商品时，库存校验和添加按钮隐藏的逻辑都正常，但一旦有多个商品，JS里的quantity变量就只会拿到最后一件商品的库存，导致其他商品的添加按钮没法正确根据库存状态隐藏。

问题出在哪？ #

你的原代码里有个关键误区：PHP是服务端渲染的，当你在JS的.each()循环里写var quantity = '<?php echo $details['stock'] ?>';时，这段PHP代码在页面加载前就已经执行完了，最终输出到页面的JS代码里，quantity的值会被固定成循环中最后一个商品的库存。所以JS遍历每个商品时，所有元素拿到的都是同一个库存值，自然没法正确对应每个商品的实际库存。

你的原问题代码 #

$('.quantity-val').each(function() { 
    var initialQuantity = parseInt($(this).text()); 
    if (initialQuantity === 0) { 
        $(this).siblings('.fa-minus-circle').hide(); 
    } 
    var quantity = '<?php echo $details['stock'] ?>'; 
    console.log(initialQuantity); 
    console.log(quantity); 
    if (initialQuantity == quantity) { 
        $(this).siblings('.fa-plus-circle').hide(); 
    } 
}); 

修复方案 #

核心思路就是给每个商品的数量元素绑定它自己的库存值，让JS能直接从当前元素上拿到专属的库存数据，具体操作如下：

1. 更新HTML模板：给带.quantity-val类的元素加上data-stock属性，把当前商品的库存通过PHP渲染进去：

<span class="quantity-val" data-stock="{{ $details['stock'] }}">
    <!-- 这里显示商品的当前购买数量 -->
</span>

2. 调整JS逻辑：在循环里通过$(this)获取当前元素的data-stock属性值，这样每个商品都能拿到自己对应的库存：

$('.quantity-val').each(function() { 
    var initialQuantity = parseInt($(this).text()); 
    if (initialQuantity === 0) { 
        $(this).siblings('.fa-minus-circle').hide(); 
    } 
    // 从当前元素的data属性获取对应商品的库存
    var stock_quantity = $(this).attr('data-stock'); 
    console.log(initialQuantity); 
    console.log(stock_quantity); 
    if (initialQuantity == stock_quantity) { 
        $(this).siblings('.fa-plus-circle').hide(); 
    } 
}); 

这样修改后，每个.quantity-val元素都带着自己对应商品的库存信息，JS遍历的时候就能准确获取每个商品的库存，添加按钮的显示隐藏逻辑也就正常工作啦。

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