用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)
你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10。这是因为var声明的变量是函数作用域的,而不是块级作用域的。也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10。还有个问题是闭包导致的,闭包保存的是外部变量的引用,而不是值。也就是说,循环10次监听器创建了10 个闭包,它们里面的i引用的是同一个啊。所以全部都指向了10.
要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0
里面的var, 因为let支持块级作用域。改成如下就正常了。
用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)的更多相关文章
- 用原生js实现,点击一个列表时,输出对应的索引
var ul = document.querySelector("ul"); ul.addEventListener("mousedown", mouseHan ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 纯js的N级联动列表框 —— 基于jQuery
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- js实现点击一个按钮进行两种状态的切换(toggle)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- js操作dom---创建一个域来输出调试信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Android Studio打包生成APK教程
一.修改版本和指定生成APK文件名[可选] 将项目切换到Project视图,打开app目录下的build.gradle文件 1.1 修定软件版本 如1.2图所示. versionCode是app的大版 ...
- QAbstractItemView区分单双击
系统不可能知道你这一次单击鼠标是为了双击指令,所以在你第一次按下鼠标时,系统会发出一个WM_XBUTTONDOWN(也就是clicked), 当你第二次单击鼠标时,系统先发送WM_XBUTTONDOW ...
- windbg 定位崩溃问题
三板斧如下: 使用windbg打开dump文件,设置好对应进程的 pdb 文件(这个很关键.为了避免releas优化导致符号文件错乱,我发布的所有 relea ...
- 比较不错的几款开源的WPF Charts报表控件
UWP Community Toolkit 1. ModernUIChart Code: http://modernuicharts.codeplex.com/ Available Charts Co ...
- FFT模板(无讲解)
#include<bits/stdc++.h> using namespace std; ; const double pi=3.1415926535898; ],len; struct ...
- SpringBoot+MyBatis+Mysql 详细示例
SpringBoot与MyBatis整合,底层数据库为mysql的使用示例 项目下载链接:https://github.com/DFX339/bootdemo.git 新建maven项目,web ...
- error: illegal character '\ufeff' 的解决方案
今天使用scalac 命令编译scala文件的时候,出错了,出现如下错误提示:
- 2.19 C++友元函数和友元类
参考: http://www.weixueyuan.net/view/6350.html 总结: 借助friend关键字将其声明为友元函数,结果,在display函数体内,我们就能访问private属 ...
- 2.8 C++参数初始化表
参考:http://www.weixueyuan.net/view/6340.html 总结: 参数初始化表可以为任何数据成员进行初始化. 初始化const成员变量的唯一方法只有利用参数初始化表. 通 ...
- SQLServer查询当前数据库所有索引及统计,并使用游标批量删除
--查询现有所有数据库表的索引情况 Select indexs.Tab_Name As [表名],indexs.Index_Name As [索引名] ,indexs.[Co_Names] As [索 ...