闭包保存正确状态

下面是一段很正常的代码,获取元素循环元素,点击其中一个li的时候弹出相对应的索引,为什么点击每一个li都弹出(点击的是第5个li')呢?因为循环跑的太快了,等你点击的时候当时的i值就是最后一个,怎么样才能解决?

 var lis = document.getElementsByTagName('li')
    console.log(lis);
    for(var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function () {
            alert('点击的是第' + i + '个li')
        },'false')
    }

解决方案:

1.闭包保存正确状态

    var lis = document.getElementsByTagName('li')
    console.log(lis.length)
    for (var i = 0; i < lis.length; i++) {
        (function (index) {
            lis[i].addEventListener('click', function () {
                index=index+1
                alert('点击的是第' + index + '个li')
            })
        }(i))
    }

2.用jquery中的each

$('li').each(function (index, item) {
    $(item).click(function () {
        alert('点击的是第' + index + '个li')
    })
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,364评论 0 8
  • 为甚嚒要学习jQuery? 因为JS中有很多痛点: window.onload事件只能出现一次,如果出现多次,后面...
    magic_pill阅读 844评论 0 13
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,555评论 1 19
  • 记得,初秋的九月 你我还是稚嫩的孩子 怀着憧憬来到大学 青涩的脸庞 阳光、乐观 注视着天使的眸光 怦然心动 我抵挡...
    仲夏梦飞阅读 188评论 0 0
  • 文/孟小满 (一)丁微第一次来到这个地方的时候,彻底傻眼了。这个地方比她的家乡还要贫穷,四周群山环绕,学校座落在山...
    孟小满阅读 834评论 53 53