js高级闭包之点赞案例

 html代码 : 

<ul>
    <li><img src="images/1.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/2.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/3.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    <li><img src="images/4.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>

css :

<style>
        ul {
            list-style-type: none;
        }
        li {
            float: left;
            margin-left: 10px;
        }

        img {
            width: 200px;
            height: 180px;
        }

        input {
            margin-left: 30%;
        }
    </style>

js代码 : 

//用闭包缓存数据
    function getValue() {
        var value = 1;
        return function () {
            //value++;
            ////每一次点击的时候,都应该改变当前点击按钮的value值
            this.value = '赞('+(value++)+')';
        }
    }

    for(var i=0;i<btns.length;i++){
        //注册事件
        btns[i].onclick = getValue();
    }

 效果如图 :