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);
            }
    

      

    拿你所需要的,做你应该做的,那么你将会得到你想要的。
  • 相关阅读:
    jQuery拖动调整表格列宽度-resizableColumns
    图像切割之(一)概述
    内存泄漏以及常见的解决方法
    中国大概能用的NTPserver地址
    SWFUpload简单使用样例 Java版(JSP)
    XML是什么,它能够做什么?——写给XML入门者
    MfC 进度条控件
    IP地址的分类——a,b,c 类是怎样划分的
    Python的包管理工具Pip
    Chapter 1 Securing Your Server and Network(6):为SQL Server訪问配置防火墙
  • 原文地址:https://www.cnblogs.com/liao8735/p/3944913.html
Copyright © 2011-2022 走看看