javascript - 使用 vanilla javascript 更改购物车中的购物车项目数量
问题描述
我正在使用 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>
解决方案
我了解您的意图是使用减号 1 和加号 1 按钮将值cart - quantity - input增加或减少1 。但是,在您的脚本中,对于每个减号按钮,当您使用document.getElementsByClassName时,您将获得所有的购物车数量输入(提示:它读取当前文档,获取具有该类名称的所有元素)。要选择这些按钮旁边的框,您需要浏览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;
}
}
我用了元素。nextElementSibling和元素。previousElementSibling告诉页面我想要它们旁边的元素,在这两种情况下都是cart-quantity-input box。
当然,如果在按钮和输入框之间添加一个元素,或者将它们封装在另一个元素中,上面的脚本就会失败。还有其他可用的导航功能。请检查一下。
推荐阅读
- events - 如何检查或检测窗口是否在 SDL 中最小化或不活动?
- python - 我想使用for循环在python中的字典中获取每个主题的总和
- android - 自定义视图从Android中的自定义主题属性获取自定义属性值
- javascript - Ramda - 然后,否则,andFinally?
- c# - 来自主 m3u8 文件的高带宽正则表达式匹配分辨率
- typescript - 如何在 TypeScript 中声明全局类型别名?
- javascript - 已安装不可变但仍显示未定义
- angular - 如何解决 jasmin UNIT 测试用例中的这种奇怪的随机错误?
- python - 如何根据列值是否是给定字符串的子字符串来过滤熊猫行?
- elasticsearch - 在kibana中查询前n个值