Question

我正在建立购物车。我想获取循环中每个产品的产品ID，但我只获得第一个产品ID

代码更新*

@if(Session::has('shopping_cart'))
    @foreach(Session::get('shopping_cart') as $item)
        <input type="hidden" name="product_id" value="{{$item['code']}}" id="product_id">
        <div class="row mt-3 pb-3" style="border-bottom: 1px solid #ddd;">
                <select name="qty" id="qty" data-product-id="{{$item['code']}}">
                    @for($i=1; $i<=5; $i++)
                    <option <?php if($item["quantity"]== $i) echo "selected";?> value="{{$i}}">{{$i}}</option>
                    @endfor
                </select>
        </div>

        <?php $total_price += ($item["price"]*$item["quantity"]); ?>
    @endforeach
@endif

获取产品ID的JavaScript

const qtys = document.querySelectorAll('#qty');

for(const qty of qtys){
    qty.addEventListener('change', changeTheQuantity);
    var product_ids = $(this).data('product_id');
    console.log(product_ids);
}
// add_to_cart.addEventListener('click', addToCart);
for(const qty of qtys){
    qty.addEventListener('change', changeTheQuantity);

    var product_ids = $(this).data('product_id');
    console.log(product_ids);
}

function changeTheQuantity(e){
    var qty_val = $(this).val();
    var product_id = $('#product_id').val();
    e.preventDefault();
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        var data = {qty_val, product_id, _token: '{!! csrf_token() !!}'};
        $.ajax({
            type:'GET',
            url:'/products/cart/update-cart',
            data:data,
            success:function(data){
                console.log('success')
               console.log(data.total);
               $('#total').text(data.total);
            }

        });

}

我更新了代码，谢谢。我已经尽力了，但是还没有成功

Answer 1

问题在于，您在这一行中一遍又一遍地重写相同的DOM元素id和相同的id，这在购物车循环内：

 <input type="hidden" name="product_id" value="{{$item['code']}}" id="product_id">

然后，当您在此行中使用jQuery检索此值时：

var product_id = $('#product_id').val();

它不知道要从哪个#product_id中提取，因为可能有多个。您在#qty选择框中遇到了相同的问题-它也在购物车循环内，因此可能为多个选择分配了相同的id。

最简单的解决方法是从重复的元素中删除这些ID（如果需要，添加一个类）。然后将所需的关键数据（product_id）添加到任何调用changeTheQuantity()的元素中。因此，如果您的选择正在呼叫changeTheQuantity()，则可以添加如下内容：

 <select name="qty[]" data-product-id="{{$item['code']}}">

然后在您的jQuery方法中：

 var product_id = $(this).data('product-id');

然后您可以删除此答案顶部带有隐藏输入的行。

编辑：要使内容更清晰-删除隐藏的内容，在选择一个类时使ID变大，通过向其添加产品ID来使名称唯一：

@foreach(Session::get('shopping_cart') as $item)
    <div class="row mt-3 pb-3" style="border-bottom: 1px solid #ddd;">
            <select name="qty{{$item['code']}}" class="qty" data-product-id="{{$item['code']}}">
                @for($i=1; $i<=5; $i++)
                <option <?php if($item["quantity"]== $i) echo "selected";?> value="{{$i}}">{{$i}}</option>
                @endfor
            </select>
    </div>
@endforeach

在jQuery方面，我们通过使用 class 作为选择器，而不是已重用的id，来获得正确的对象：

$(".qty").on("change", function () {
    var qty_val = $(this).val();
    // NOTE we are drawing from data for the id, and use the '-' to select
    var product_id = $(this).data('product-id');
   // AJAX, etc
 }

如何使用jquery从循环中获取产品ID？

1 个答案: