js实现购买数量加减效果

写在前面：当我们需要在多个页面都有操作数量的需求时的一种解决方案

结构：

js代码：

<script type="text/javascript">
        function getElementByAttr(tag, attr, value) {
            var aElements = document.getElementsByTagName(tag);
            var aEle = [];
            for (var i = 0; i < aElements.length; i++) {
                if (aElements[i].getAttribute(attr) == value)
                    aEle.push(aElements[i]);
            }
            return aEle;
        }
        window.onload = function () {
            var box = getElementByAttr("div", "data-box", "buy");
            for (var i = 0; i < box.length; i++) {
                calculate(box[i]);

            }
        }
        function calculate(box) {
            var oBtn = box.getElementsByTagName("button");
            var ipt = box.getElementsByTagName("input")[0];
            var number = parseInt(ipt.value);
            oBtn[0].onclick = function () {
                number--;
                if (number < 0) {
                    number = 0;
                }
                ipt.value = number;

            }
            oBtn[1].onclick = function () {
                number++;
                ipt.value = number;
            }
        }
 </script>

1.通过getElementByAttr函数获取加减按钮和显示框的父元素（之前写过具体的实现思路），给父元素都统一定义了data-box属性

2.找到页面中所有目标元素后，循环遍历，给每一次目标元素执行函数calculate(box[i]),里面的参数就是它本身

3.编写函数，找到加减按钮和显示框，定义变量number存储显示框的值并进行取整

4.给第一个‘减’按钮增加onclick事件，每次点击先自减1，判断是否小于0，如果小于0，number就等于0，然后把运算出来的结果赋给显示框的值

5.给第二个‘加’按钮增加onclick事件，每次点击自增，赋值。