zoukankan      html  css  js  c++  java
  • js动态循环绑定事件的变量问题

    在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定,循环对元素的事件进行赋值,在这个过程中我们会遇到一个问题,那就每个元素事件运行的时候变量怎么都是相同的值。

    这里涉及到变量的作用域的问题,可以用闭包来解决这个问题。

    这里举个简单的列子来说明:

    <ul id="ulDemo">
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
    </ul>

    我们来给这些li添加一个onclick事件,弹出li是第几条数据

           var list = document.getElementById("ulDemo").getElementsByTagName("li");
            for (var i = 0; i < list.length; i++) {
                var li = list[i];
                li.onclick= function () {
                    alert("第" + (i + 1) + "条" + this.innerHTML);
                }
            }

    结果弹出的都是第6条数据,这里的onclick函数中的变量i指向的内存地址,经过循环之后i变成了5,所有的li的点击事件都在同一个作用域中,我们可以通过闭包把i的作用域独立出来

      var list = document.getElementById("ulDemo").getElementsByTagName("li");
            for (var i = 0; i < list.length; i++) {
                var li = list[i];
                li.onclick= (function (index) {
                    return function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
                })(i);
            }
    

    其他写法

     for (var i = 0; i < list.length; i++) {
                var li = list[i];
    
                var addClick = function (el, index) {
                    el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
                };
    
                addClick(li, i);
            }
    

      

     for (var i = 0; i < list.length; i++) {
                var li = list[i];
    
                (function (el,index) {
                    el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
                })(li,i);
            }
    

      

    拿你所需要的,做你应该做的,那么你将会得到你想要的。
  • 相关阅读:
    记我安装Caffe的血泪史(1)
    UWP连接mysql 实现数据远程备份
    数据库性能测试
    性能瓶颈分析定位
    系统安全性测试
    WEB安全性测试点
    jmeter测试报告分析
    Linux常用命令大全
    软件测试入门到飞升上仙之客户端
    软件测试入门到飞升上仙之web 端测试
  • 原文地址:https://www.cnblogs.com/liao8735/p/3944913.html
Copyright © 2011-2022 走看看