当当购物车JS

最新推荐文章于 2024-06-18 11:26:21 发布

m0_64531203

最新推荐文章于 2024-06-18 11:26:21 发布

阅读量702

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64531203/article/details/121765454

版权

本文详细探讨了当当购物车的JavaScript实现，包括商品添加、删除、数量调整以及总价计算等功能的实现原理。通过实例分析，揭示了前端开发中如何使用JS进行动态交互设计，以及在实际项目中可能遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

/**
 * 加一
 */
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)