Laravel 和 Javascript 购物车数量问题

Question

我正在制作网上商店，但我被困在购物车部分。我想要一个选择，让用户选择产品的数量。

我使用 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);      

               

 });  

Answer 1

应该：var&nbsp;item=$(this).closest(".carrito__box--qty");代替var&nbsp;item=$('#qty').closest(".carrito__box--qty");

Answer 2

#qty您在循环中使用非唯一的 id，这是错误的方法。Id属性应该是唯一的。在您的 JavaScript 中，您应该使用this引用所选 HTML 对象的关键字。变量item则变为：var item=$(this).closest(".carrito__box--qty");