Laravel & Javascript 购物车数量问题

Question

我正在制作和在线商店，但我被困在购物车部分。 我想要一个 select ，用户可以在其中选择产品的数量。

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

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

@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);      
               
 });  

     

Answer 1

应该：

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

代替

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

Answer 2

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

在您的 javascript 中，您应该使用this关键字，它指的是所选的 HTML object。 item变量然后变为：

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