【发布时间】：2018-10-09 16:57:02
【问题描述】：
我是 JS 的初学者，在购物车工作。我有几个使用 ES6 模板字符串在页面中呈现的产品。到目前为止一切正常，您可以将项目添加到购物篮和购物篮并正确更新总数。我唯一遇到问题的是增加/减少按钮：它们只工作一次，如果你再次点击控制台中打印的数量保持不变。
我确实找到了其他与递增/递减函数相关的 SO 帖子，但该按钮只能工作一次，所以我认为问题与我忽略的代码中的其他内容有关。
请看下面的代码：
这是要渲染的购物车
// select ul
const shoppingCart = document.querySelector('.cart-items');
// create a li item inside ul
let billContainer = document.createElement('li');
// attach an event listener to every li
billContainer.classList.add('list');
// create the markup for every item added to the cart
for(let j = 0; j < basket.length; j++){
const billMarkup = `
<p class="prodName">${basket[j].name}</p>
<div class="button-wrapper">
<button type="button" name="increase" class="increase">+</button>
<span class="quantity">${basket[j].quantity}</span>
<button type="button" name="decrease" class="decrease">-</button>
</div>
<p class="totPrice">£${basket[j].price}</p>
`;
// add the markup to the DOM
billContainer.innerHTML = billMarkup;
shoppingCart.appendChild(billContainer);
}
这是增加/减少功能（按钮的事件监听器附加到它们的父 'li'）：
// attach an event listener to every li
const li = document.querySelectorAll('.list');
li.forEach( liItem => liItem.addEventListener('click', updateBill));
// add or remove items on click
function updateBill(e){
if(e.target.nodeName === 'BUTTON'){
// current value in the basket
let value = parseInt(this.querySelector('.quantity').textContent);
// if the user clicks on 'increase' button
if(e.target.name === 'increase'){
value++;
console.log(value);
// if the user clicks on 'decrease' button
} else if(e.target.name === 'decrease'){
value < 1 ? value = 1 : '';
value--;
console.log(value);
}
}
}
谢谢！
【问题讨论】：
-
你需要将
value写回DOM。 -
递增/递减后，必须将值设置回 span.quantity 选择器。因此，下次您获得更新的价值。也不要在父母上创建一个事件并尝试倾听孩子。而是将事件拆分为特定的子元素。
-
谢谢，但它并不能解决问题，因为它仍然会在您第一次点击时增加/减少。抱歉，我没有将它添加到 DOM，因为我仍在控制台中对其进行测试。
标签： javascript function increment decrement