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");