修改django電商網站的商品數量？ DJANGO

Question

它沒有給出錯誤。 僅在第一個產品中更改數量，即使當我按第二個產品的箭頭時，第一個產品的數量也在更改。 購物車.js

var changeQ = document.getElementsByClassName('increase')


for (i = 0; i < changeQ.length; i++) {
    changeQ[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'Action:', action)
        
        
        if (action == 'plus'){
            Increase(productId, action)
        }
        else if(action=='minus'){
            Decrease(productId, action)
        }
    })
}

function Increase(productId,action){
    console.log('Increase')
    var quantity = Number(document.getElementById("quantity").value);
    quantity = quantity+1;
    document.getElementById("quantity").value = quantity;
    console.log(quantity);
}

function Decrease(productId,action){
    var quantity = Number(document.getElementById("quantity").value);
    console.log('Decrease')
    quantity = quantity-1;
    document.getElementById("quantity").value=quantity;

}

模板

<div class="counter">
    <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
    <div class="quantity"><input type="number" id="quantity" value="1"></div>
    <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
  
  </div>

是在Django。那具體的產品怎么辦呢。 有人可以幫我解決這個問題嗎！

Answer 1

由於您在Increase和Decrease函數中使用了document.getElementById() ，它返回第一個元素id='quantity'這就是為什么您只能為第一個產品設置數量的原因。

因此，您需要使用一些值來區分id='quantity'的input標簽。 我建議將data-product="{{ item.product.id }}"添加到input標簽，因為您已經將產品 ID 作為productId傳遞給這兩個函數。

因此你的模板會是這樣的

<div class="counter">
    <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
    <div class="quantity"><input type="number" id="quantity" value="1" data-product="{{item.product.id}}"></div>
    <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>

Increase和Decrease功能將像這樣修改

function Increase(productId,action){
    console.log('Increase')
    var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
    quantity = quantity+1;
    document.querySelector(`input[data-product=${productId}]`).value = quantity;
    console.log(quantity);
}

function Decrease(productId,action){
    var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
    console.log('Decrease')
    quantity = quantity-1;
    document.querySelector(`input[data-product=${productId}]`).value=quantity;
}

• document.querySelector()允許我們對 select 個元素使用 CSS 個選擇器。 在這里，我們將它用於 select input標簽，其data-product屬性等於productId中的值。
• ${}用於字符串插值，我們可以用它來將productId插入到選擇器字符串中。