html代碼

<div><p>單價:<span>30</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價:<span>30</span></p> </div> <div><p>單價:<span>666</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價:<span>666</span></p> </div> <div><p>單價:<span>888</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價:<span>888</span></p> </div>

JS代碼

var aAdd = document.querySelectorAll(".add");var sub = document.querySelectorAll(".sub");for (var i = 0; i < aAdd.length; i++) {aAdd[i].onclick = function () {var num = Number(this.previousElementSibling.value);num++;this.previousElementSibling.value = num;var price = this.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild.innerHTML;this.nextElementSibling.firstElementChild.innerHTML = price * num;}}for (var i = 0; i < sub.length; i++) {sub[i].onclick = function () {var num = Number(this.nextElementSibling.value);num--;this.nextElementSibling.value = num;var price = this.previousElementSibling.firstElementChild.innerHTML;this.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = price * num;}}

總結

以上是生活随笔為你收集整理的购物车商品计算JavaScript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。