购物车商品计算JavaScript实现

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;
        }
    }