位置: 编程技术 - 正文

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的类型有哪几种)

  • 印花税需要每月缴纳吗
  • 加计抵扣10%的进项税 会计处理
  • 出差加油算什么费用
  • 净营业周期和营业周期
  • 装修行业开票税率
  • 财务记账之后是否必须审核
  • 帮别人买交强险,受益人是我,有影响吗
  • 职工年平均工资是什么意思
  • 退土增税后账务处理
  • 企业最常用的业务分录
  • 股利支付率怎么找数据
  • 专项科研经费
  • 企业食堂买东西怎么入账
  • 没进项发票要交多少税
  • 税务局的网站以后有这些变化是你不知道的!
  • 万元的票可以开到多大金额
  • 企业不合规发票责令补开处理
  • 合同到期退房子,租金退吗
  • 职工食堂报销经费标准
  • 允许扣除的土地价款怎么计算例题
  • 私人公司老板
  • 专项应付款怎么记账
  • 一键ghost优盘启动下载
  • 进项票怎么做
  • 在线网速测试网站测速工具
  • 对公汇款银行退回
  • 印花税的计税
  • python安装tensorflow gpu
  • smart方法的含义和重要性
  • vscode eslint vue
  • phpfor循环语句
  • 小微企业认定标准时间
  • 体检的收据是什么
  • 所得税费用会计科目代码
  • 承兑汇票贴现利率是怎么算
  • mac安装brew
  • sql自增1
  • seacms error怎么办
  • 印花税征税范围及税率
  • 交易性金融资产的账务处理
  • db2自增函数
  • 一般纳税人领票提交什么资料
  • 企业固定资产内部控制审计研究论文
  • 股权收购协议书实际案例
  • 外购商品发放给员工 进项税额能不能抵扣
  • 销售货物提供运输服务分录
  • 什么叫公关费用
  • 补缴以前年度所得税及滞纳金账务处理
  • 电子商业承兑会不会拿不到钱
  • 利息收入如何做分录
  • 企业设备维修
  • 减免的增值税要交所得税吗
  • 经营租赁不动产租赁发票开具要求
  • 销项发票能不能退税
  • 企业控股情况怎么看
  • 本年收益属于什么科目
  • 购入固定资产一次性税前扣除
  • 会计入门技巧
  • mysql查询表语句
  • 怎么设置xp系统
  • fedora常用命令
  • win8显示桌面图标
  • centos6.5安装步骤
  • 进程mmc.exe
  • nacos监控服务
  • win8.1 操作中心
  • javascriptcsdn
  • node. js教程
  • android游戏开发用什么语言
  • rhel7.6安装
  • 爬虫爬取微博
  • 安卓开发viewpager的用法
  • js window.screen
  • 国家税务局大厅上班时间
  • 农业方面有哪些专业
  • 重庆国税官网网址
  • 湖北省电子税务局
  • 增值税发票打印机怎么调整打印位置
  • 股权转让是否要交土地增值税
  • 交强险是什么样的照片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设