js使用闭包循环为a标签正确添加事件

以示例说明：

 

实现效果：循环为带有ml-praise样式类的a标签添加事件，并且在点击a标签后，相应的数量增加1。

 

Html结构如下所示：

    <ul>

        <li><a href="javascript:;" class="ml-praise">数量：<span class="ding-num">100</span></a></li>

        <li><a href="javascript:;" class="ml-praise">数量：<span class="ding-num">200</span></a></li>

        <li><a href="javascript:;" class="ml-praise">数量：<span class="ding-num">300</span></a></li>

        <li><a href="javascript:;" class="ml-praise">数量：<span class="ding-num">400</span></a></li>

    </ul>

 

JS实现代码：

        function addPraiseNum() {

            var praiseObjs = document.getElementsByClassName('ml-praise');

            for (var i = 0; i < praiseObjs.length; i++) {

                var praiseObj = praiseObjs[i];

                praiseObj.onclick = (function (dingObj) {

                    return function () {

                        dingObj.innerHTML = parseInt(dingObj.innerHTML) + 1;

                    };

                })(praiseObj.getElementsByClassName('ding-num')[0]);

            }

 

        }

 

实现效果如下：

转存失败重新上传取消