时间戳

首页 > 解决方案 > 如何使用 jquery 从循环中获取产品 ID？

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

问题描述

我正在构建一个购物车。我想获取循环中每个产品的产品 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);
            }

        });

}

我更新了我的代码谢谢。我已经尽我所能尝试了，但它还没有工作

标签： javascriptphpjquerylaravel

解决方案

问题是您在此行中一遍又一遍地重写相同的 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
 }

推荐阅读