Question

我正在使用Django构建电子商务网站，并且尝试使用纯JavaScript更改购物车中的商品数量。

我已经能够使用查询选择器选择并单击增加和减少按钮，但是当我单击这些按钮中的任何一个时，购物车中只有第一项会更新。其余按钮不会增加与之关联的项目的数量。

我该怎么办？

这是JavaScript代码：

var minusButton = document.getElementsByClassName("btn minus1")
for (var i = 0; i < minusButton.length; i++) {
minusButton[i].addEventListener("click", function(event){
var quantity = document.getElementsByClassName("cart-quantity-input")
for (var i = 0; i < quantity.length; i++) {
var quantity = quantity[i].value--
//console.log(quantity)
 }
})}

这是HTML代码：

<!DOCTYPE HTML> 
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/cart.css' %}">
</head>

<body>
<!-- navigation menu -->
{% include "topnav.html" %}

<div class="maincontent">
    <h1 class="hhh1" style="font-size:50px; margin:0px; margin-bottom:30px">Your Cart</h1>
    <div class="centerblock">
    <!-- DYNAMIC CONTENT GOES HERE -->
        <div class="cart-row">
            <span class="cart-item cart-header cart-column">ITEM</span>
            <span class="cart-price cart-header cart-column">PRICE</span>
            <span class="cart-quantity cart-header cart-column">QUANTITY</span>
        </div>
        <div class="cart-items">
        {% for item in items %}
            <div>
                <div class="cart-item cart-column">
                    <img class="cart-item-image" src="{{item.product.imageURL}}" width="100" height="100">
                    <span class="cart-item-title">{{item.product.title}}</span>
                </div>
                <span class="cart-price cart-column">£{{item.product.price}}</span>
                <div class="cart-quantity cart-column">
                    <div class="quantity">
                        <button data-product={{item.product.id}} data-action="remove" id="minus" class="btn minus1 update-cart">-</button>
                        <input class="cart-quantity-input quantity" type="number" id="id_form-0-quantity" name="quantity" min="1" max="5" value="{{item.quantity}}">
                        <button data-product={{item.product.id}} data-action="add" id="plus" class="btn add1 update-cart">+</button>
                        <button class="removeButton" type="button">REMOVE</button>
                    </div>
            {% endfor %}
                </div>
            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Total</strong>
                <span class="cart-total-price">£{{order.get_cart_total}}</span>
            </div>
            <div class="ordersummary">
                <form action="checkout-info" method="post">
                {% csrf_token %}
                <input type="submit" value="CHECKOUT">
                </form>
            </div>
        </div>
    </div>
</div>

{% include "footer.html" %}

<script src="{% static 'js/cart.js' %}" ></script>
<!--<script src="{% static 'js/test.js' %}" ></script>-->

</body>

</html>

Answer 1

我了解您的意图是使用 minus1 和 add1 按钮将购物车数量输入的值增加或减少一。但是，在脚本上，对于每个减号按钮，当您使用 document.getElementsByClassName 时，都会得到所有 cart-quantity-input （提示：其读为对于当前文档，获取具有该类名称的所有元素）。要选择这些按钮旁边的框，您需要通过HTML结构进行导航。看看下面的脚本：

let deductBtnArr = document.getElementsByClassName('minus1');
let addButtonArr = document.getElementsByClassName('add1');

for(let deductBtn of deductBtnArr){
    deductBtn.onclick = function(){
        let currentInputBox = deductBtn.nextElementSibling;
        currentInputBox.value =  currentInputBox.value - 1;
    }
}

for(let addButton of addButtonArr){
    addButton.onclick = () => {
        let currentInputBox = addButton.previousElementSibling;
        currentInputBox.value =  parseInt(currentInputBox.value) + 1;
    }
}

我使用了 element。nextElementSibling 和 element。previousElementSibling 告诉页面我想要元素紧挨着它们，两者都案例是购物车数量输入框。

当然，如果在按钮和输入框之间添加元素，或者将它们封装在另一个元素中，则上面的脚本将失败。周围还有其他导航功能。请检查一下。

使用香草javascript更改购物车中的购物车项目数量

1 个答案: