如何使用 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的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一遍又一遍，在这条线，这是一个大车循环内：&nbsp;<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()，您可以添加如下内容：&nbsp;<select name="qty[]" data-product-id="{{$item['code']}}">然后在你的 jQuery 方法中：&nbsp;var product_id = $(this).data('product-id');然后，您可以删除此答案顶部带有隐藏输入的行。编辑：为了让它更清楚一点 - 删除隐藏，在选择一个类时设置 ID，通过向其中添加产品 ID 使名称唯一：@foreach(Session::get('shopping_cart') as $item)&nbsp; &nbsp; <div class="row mt-3 pb-3" style="border-bottom: 1px solid #ddd;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="qty{{$item['code']}}" class="qty" data-product-id="{{$item['code']}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @for($i=1; $i<=5; $i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option <?php if($item["quantity"]== $i) echo "selected";?> value="{{$i}}">{{$i}}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endfor&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </div>@endforeach在 jQuery 方面，让我们通过使用类作为选择器来获取正确的对象，而不是id被重用的对象：$(".qty").on("change", function () {&nbsp; &nbsp; var qty_val = $(this).val();&nbsp; &nbsp; // NOTE we are drawing from data for the id, and use the '-' to select&nbsp; &nbsp; var product_id = $(this).data('product-id');&nbsp; &nbsp;// AJAX, etc&nbsp;}