JavaScript点击计数的实现

关键词：点击计数

我们做个小实例，当鼠标点击每个按钮时，显示点击该按钮的次数

<!-- 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的参数