html代碼

<div><p>單價(jià):<span>30</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價(jià):<span>30</span></p> </div> <div><p>單價(jià):<span>666</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價(jià):<span>666</span></p> </div> <div><p>單價(jià):<span>888</span></p><input type="button" value="-" class="sub"><input type="text" value="1"><input type="button" value="+" class="add"><p>總價(jià):<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;}}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。