关键词:点击计数
我们做个小实例,当鼠标点击每个按钮时,显示点击该按钮的次数
<!-- HTML代码 -->
<button>单击1</button>
<button>单击2</button>
<button>单击3</button>
<button>单击4</button>
<button>单击5</button>
var btn = document.querySelectorAll("button");
var i = 0;
var count = 0;
通常初学者会这样做
// 初学者传统的做法一般是这样的
for(i=0;i<btn.length;i++){
btn[i].onclick = function(){
count++;
console.log(count);
}
}
// 但是这种方法不能实现每个按钮分别计数
我思来想去,觉得可能是count有问题,所以对代码进行了改版
// 把count放在了for循环里
for(i=0;i<btn.length;i++){
count++;
add(btn[i])
}
function add(obj) {
obj.onclick = function () {
console.log(count);
}
}
// 但是每次结果都是5 555[捂脸]~
for这个循环,飞速完成了所有的遍历,让我猝不及防~
既然是对每个按钮做点击计数,那我就把count放在点击事件外面!
for(i=0;i<btn.length;i++){
add(btn[i])
}
function add(obj) {
var count = 0;
obj.onclick = function () {
count++;
console.log(count);
}
}
// 来之不易的成功!
其实我们还可以通过闭包的方法实现这一功能,Mark下我的另一篇文章 [闭包][]
[闭包]: http://www.jianshu.com/p/5190f033d6fd
for(i=0;i<btn.length;i++) {
btn[i].onclick = (function (count) {
return function () {
count++;
console.log(count);
}
})(0); // 小括号里是function的参数