Laravel & Javascript 购物车数量问题答案

【问题标题】：Laravel & Javascript shopping cart qty problemLaravel & Javascript 购物车数量问题
【发布时间】：2020-11-12 07:45:02
【问题描述】：

我正在制作和在线购物，但我被困在购物车部分。我想选择用户选择产品数量的位置。

我正在使用 javascript 来监控所选选项的更改并保存产品的 ID，然后发出请求等并更新购物车。我将产品 id 保存为 div 的 id，以便更容易找到变量。

我遇到的问题是我的控制台日志显示它只选择购物车上的第一项（及其产品 ID），而不选择购物车的其余产品。这是风景

@foreach ($products as $product)

    <div class="carrito-item" >

        <img src="../public/images/{{$product['item']['image']}}" alt="" class="carrito-item__image">

        <div class="carrito-item__text">

            <div class="carrito__box carrito__box--name">
                <p class="carrito-item__name">{{ $product['item']['name'] }}</p>
            </div>
            <div class="carrito__box carrito__box--qty" id="<?= $id?>">
                <p class="carrito-item__cantidad" >x {{ $product['qty'] }}</p>

                <select name="qty" id="qty" >

                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>

                </select>
            </div>

        </div>
    </div>
@endforeach

这是JS文件

 $('select').on('change', function(){

    var item=$('#qty').closest(".carrito__box--qty");
    var id= item.attr("id");
                
    console.log(item);
    console.log(id);      
               
 });

【问题讨论】：

标签： javascript php laravel select cart

【解决方案1】：

应该是：

var item=$(this).closest(".carrito__box--qty");

而不是

var item=$('#qty').closest(".carrito__box--qty");

【讨论】：

【解决方案2】：

您在循环中使用了非唯一 ID #qty，这是一种错误的方法。 Id 属性应该是唯一的。

在您的 javascript 中，您应该使用了 this 关键字，它指代选定的 HTML 对象。然后item 变量变为：

var item=$(this).closest(".carrito__box--qty");

【讨论】：