购物车1.1

最新推荐文章于 2023-02-02 09:59:38 发布

原创最新推荐文章于 2023-02-02 09:59:38 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JS 专栏收录该内容

91 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现购物车中商品数量的加一和减一功能，包括边界检查、商品总价的实时计算以及总价的更新。通过事件委托处理点击事件，确保了代码的效率和可维护性。

/**
 * 加一
 */
function onPlus() {
    // 获取所有加节点，给每个加节点绑定事件
    var plusArr = document.querySelectorAll('input[name="plus"]')
    for (var i = 0; i < plusArr.length; i++) {
        plusArr[i].onclick = function () {
            //原来的数量加一
            // 1. 获取数量节点元素
            var amountEle = this.previousElementSibling
            // 2. 原来数量值
            var amount = amountEle.value
            // 3. 数量加一
            amount++
            // 4. 加一后数量值重新赋值给节点元素
            amountEle.value = amount

            var minusEle = amountEle.previousElementSibling

            //5.移除disabled作用：让减号可用
            minusEle.removeAttribute('disabled')

            //6. 计算单个商品总价
            //6.1 获取商品单价
            var singlePriceEle = this.parentElement.previousElementSibling
            var singlePrice = singlePriceEle.innerHTML
            singlePrice = singlePrice.substring(1)
            //6.2计算商品总价
            singleTotalPrice = singlePrice * amount
            //6.3获取单个商品总价节点
            var totalEle = this.parentElement.nextElementSibling
            totalEle.innerHTML = `￥${singleTotalPrice.toFixed(2)}`

            //7.计算总价
            getTotalPrice()
        }
    }
}

/**
 * 减一
 */
function onMiuns() {
    var minusArr = document.querySelectorAll('input[name="minus"]')
    for (var i = 0; i < minusArr.length; i++) {
        minusArr[i].onclick = function () {
            //获取数量节点元素
            var amountEle = this.nextElementSibling
            var amount = amountEle.value //获取数量节点元素原来的值
            amount-- //数量减一

            //边界检查
            if (amount <= 0) {
                //减数量不可用
                this.setAttribute('disabled', true) //添加disabled作用： 让减号不可用
            }
            amountEle.value = amount //减一后的数量重新赋值给数量节点元素

        }
    }
}

/**
 * 计算所有商品总价
 *   获取所有单个商品总价累加求和
 */
function getTotalPrice() {
    var minusArr = document.querySelectorAll('input[name="minus"]')
    var totalPrice = 0 //所有商品总价
    for (var i = 0; i < minusArr.length; i++) {
        //获取单个商品总价
        var singleEle = minusArr[i].parentElement.nextElementSibling
        var singlePrice = singleEle.innerHTML
        singlePrice = singlePrice.substring(1)
        totalPrice = totalPrice + Number(singlePrice)
    }

    var spanPriceEle = document.querySelector('.total-price')
    spanPriceEle.innerHTML = `￥${totalPrice.toFixed(2)}`

}

/**
 * 操作购物车商品项动作
 */
function onCartShop() {
    var tableEle = document.querySelector('table')
    //事件委托给父级节点处理
    tableEle.addEventListener('click', function (e) {
        e = e || window.event //事件对象
        var target = e.target || e.srcElement //事件目标对象
        //加一操作
        if (target.value == '+') {
            var amountEle = target.previousElementSibling
            var amount = amountEle.value
            amount++ //数量加一
            amountEle.value = amount

            var minusEle = amountEle.previousElementSibling
            //5.移除disabled作用：让减号可用
            minusEle.removeAttribute('disabled')

        }

        if (target.value == '-') {
            var amountEle = target.nextElementSibling
            var amount = amountEle.value
            amount--
            //边界检查
            if (amount <= 0) {
                //减数量不可用
                target.setAttribute('disabled', true) //添加disabled作用： 让减号不可用
            }
            amountEle.value = amount

        }


    })
}

// onPlus()
// onMiuns()
onCartShop()