位置: 编程技术 - 正文

JS常见问题之为什么点击弹出的i总是最后一个(javascript常见问题)

编辑:rootadmin

推荐整理分享JS常见问题之为什么点击弹出的i总是最后一个(javascript常见问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript常见问题,js中遇到的问题,javascript常见问题,js中出现nan解决方案,javascript:;怎么解决,js常见错误,js常见错误,js中遇到的问题,内容如对您有帮助,希望把文章链接给更多的朋友!

在前端群里看见过很多人问过这个问题,今晚又有人问了这个问题,所以写篇文章整理一下。首先看一下代码,点击li之后弹出当前li所对应的索引值。于是很多人刷刷刷写出了下面的代码。

但是结果不尽人意,为了简单,我们约定一下页面中有2个li。点击li之后弹出的都是2。 我们首先来分析一下为什么结果是1.我们可以简单的将循环分成两部。

在执行click的函数的时候,会有一个作用域链,这个作用域链是一个对象列表,这组对象定义了代码作用域中的变量。( 关于变量对象的内容想更详细了解的可以查看变量对象。)当我们alert(i)的时候,会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象,这时循环已经结束了,i此时的值为2.所以点击任何一个li,弹出的都是2,而不是我们想要的索引值。重点在于弹出的是变量i,变量i,变量i。重要的事情说三遍。

那么问题来了,我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候,将这个时候i的值保存在内部的作用域中。解决方案如下。

这里涉及到一个块级作用域的概念。在es6出来前,函数是作为创建块级作用域的主要手段。这里我们通过在aLi[i].onclick外面套上一层函数,将i作为参数,我们重新分析一下结果。

由于多了一层自执行函数的包裹,当我们点击li时,会有三层的作用域,从内带外分别是:click函数内部的变量对象,自执行函数的变量对象和最外层的window对象。查找到第二层的时候,找到了i,自执行函数的i等于传入的参数值,相对应的存下了当时i的值,所以就弹出了相应的索引值。

下面再给大家分享一个js常见的问题,实现点击li能够弹出当前li索引与innerHTML的函数

JS常见问题之为什么点击弹出的i总是最后一个(javascript常见问题)

点击其中一项需要alert出如下结果:

按照我们平常的想法,代码应该是这样写的:

但是不巧的是产生的结果是这样的:

索引index为什么总是4呢,这是js中没有块级作用域导致的。这里有三种解决思路

1. 使用闭包

2.使用ES6中的新特性let来声明变量

用let来声明的变量将具有块级作用域,很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效

3.引入jquery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)

JavaScript类型系统之正则表达式 定义正则又叫规则或模式,是一个强大的字符串匹配工具。javascript通过RegExp类型来支持正则表达式特性[1]贪婪性,匹配最长的[2]懒惰性,不设置/g,则

js与jQuery实现checkbox复选框全选/全不选的方法 本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下:先来看看JavaScript实现checkbox复选框全选/全不选的方

javascript简单比较日期大小的方法 本文实例讲述了javascript简单比较日期大小的方法。分享给大家供大家参考,具体如下://获取起始日期varstartDate=document.all.startdate.value;//转换为日期格式

标签: javascript常见问题

本文链接地址:https://www.jiuchutong.com/biancheng/384707.html 转载请保留说明!

上一篇:浅谈javascript 函数表达式和函数声明的区别(javascript中的函数该如何理解)

下一篇:JavaScript类型系统之正则表达式(js的类型有哪几种)

  • 中级会计报名必须用ie浏览器吗
  • 当年亏损额为什么不能填?
  • 集团内部借款利息收入增值税
  • 报关单保费000/0.1/1
  • 应收利息增加会计分录
  • 收到电子退库的摘要怎么写
  • 跨年的费用怎么调整
  • 物业采购主要做什么
  • 增值税逾期未申报网上可以吗
  • 物业补贴计入什么科目
  • 收到进项发票如何记账
  • 超市里的摊位租金贵吗
  • 上市公司限制性股票行权时间限制多久
  • 营改增后转让土地使用权增值税
  • 代理结算费用应该如何处理
  • 开外管证再省外预缴税收要怎么报税?
  • 购买固定资产没付款怎么入账
  • 银行本票结算分录
  • 转出多交增值税借方余额表示
  • 营改增之前固定资产可以抵扣吗
  • 补偿款开具发票
  • 营改增后劳务派遣公司账务处理
  • 小微企业所得税优惠政策最新2022
  • 关于个人财产转让的规定
  • 商品流水账怎么做
  • 企业的主营业务收入
  • 对公账户管理费怎么收
  • 公司帐上欠了股东很多钱有何税务风险?
  • 融资租赁开始时的账务处理
  • 公司商品房出售流程
  • linux 界面卡死
  • 电脑黑屏怎么办主机还是亮的
  • 债务利率的公式
  • 在windows7提供了一种什么技术
  • 印花税计提缴纳时间
  • 小规模企业有收入吗
  • 累计计税折旧如何调整
  • 跨境服务免征增值税需要一直备案吗
  • 运行安装程序时发生错误
  • 进口增值税的账务处理
  • thinkphp addons
  • 其他综合收益的借贷方向
  • php xml转字符串
  • 有趣的html简单代码
  • 微信网页授权管理在哪里
  • php不同用户登录不同页面
  • 技术服务费增值税税率1%
  • 哪些人需要进行个人所得税年度汇算
  • mysql数据库命名 可以用-吗
  • 税务登记后要马上报税吗
  • 企业利润分配的含义
  • 发放职工薪酬计入什么科目
  • 高新技术企业如何计算企业所得税
  • 结转本年利润的账务处理
  • 已抵扣进项怎么转出
  • 开具电费发票如何入账?
  • 其他应付款贷方正数表示什么意思
  • 工程一直不办结算怎么办
  • 现金日记账的登记证据有
  • 企业对外购和自己的区别
  • 从农民手里租用土地用于科研要开发票吗
  • 全面解析皮炎
  • centos6.2安装
  • 重装系统注册表会重置吗
  • windows server 2003与2008的区别联系与选择指南
  • linux操作系统百度百科
  • gacrunner.exe是什么
  • win8 侧边栏
  • 如何安装QQ软件
  • windows操作大全
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • js的匿名函数
  • Unity的WWW类的用法整理
  • shell删除一个文件
  • 批处理打开网络连接
  • js引用传递
  • JS Timing
  • 税务局每月征期是什么时候
  • 国家税务总局令16号公告
  • 如何查询企业是否注销成功
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设