写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案
结构:
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事件,每次点击自增,赋值。