购物车加减案例

473 阅读1分钟

思路:

1.获取元素

2.为加号添加单击事件

(1)先获取到原先购物车的数字

(2)数量自加+1

(3)重新赋值给输入框

(4最后一步) 重新点击加号按钮的,恢复减号按钮的点击功能

3.为减号添加单击事件

(1)先获取到原先购物车的数字

(2)数量自减-1

(3)重新赋值给输入框

(4)进行判断,当数字为1时,禁用减号按钮

 <style>
        div {
            width: 80px;
        }

        input[type='text'] {
            width: 50px;
            height: 44px;
            outline: none;
            border: 1px solid #ccc;
            text-align: center;
            border-right: 0;
        }

        input[type='button'] {
            height: 24px;
            width: 22px;
            cursor: pointer;
        }

        input {
            float: left;
            border: 1px solid #ccc;
        }
    </style>
 <div>
        <input type="text" id="total" value="1" readonly />
        <input type="button" value="+" id="add" />
        <input type="button" value="-" id="reduce" />
    </div>

    <script>
        //获取元素
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')
        let total = document.querySelector('#total')

        //为加号按钮添加单击事件
        add.addEventListener('click', function () {
            // 获取原先的购物车数字
            let num = total.value
            // 自增
            num++
            //赋值回去
            total.value = num

            //从新点击加号按钮的,恢复减号按钮的点击功能
            reduce.disabled = false

        })

        //为减号按钮添加单击事件
        reduce.addEventListener('click', function () {
            // 获取原先的购物车数字
            let num = total.value
            // 自减
            num--
            //赋值回去
            total.value = num

            //判断,当数字为1时,禁用减号按钮
            if (num == 1) {
                reduce.disabled = true
            }
        })

    </script>