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

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的javascriptconst 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()。因此，如果您的 select 正在调用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 方面，让我们通过使用类作为选择器来获取正确的对象，而不是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

 }