js 使用闭包点击li获取他的索引值

最新推荐文章于 2022-10-20 19:29:19 发布
最新推荐文章于 2022-10-20 19:29:19 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/txw0415/article/details/80473298
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
 
</script>

<body>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
    </ul>
</body>

</html>
<script>
    /*
       闭包概念
       1.通俗的讲 闭包 就是 函数内部 的函数
        .闭包也延长了 变量的 生命周期(活的久一点)

      闭包的缺点:
       额外的增加变量 变量的生命周期长
       (额外的造成内存的开销)
    */


    /* 需求
        为li标签绑定点击事件
        点击的时候 打印 他的索引值
    */
    var liList = document.getElementsByTagName('li');
    for (var i = 0; i < liList.length; i++) {
        //  1.使用闭包
        liList[i].onclick = (function () {
            var index = i;
            // 返回了一个匿名函数
            return function () {
                console.log('我的索引是:' + index);
            };
        }())
    }
</script>

每天努力搬砖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用闭包形式获得索引值
黑白的猫屋
07-04 225
## 利用闭包形式获得索引值（很通俗解释版） ```javascript <script> window.addEventListener('load',function(){ // 闭包 var lis = document.querySelectorAll('li'); for ( var i = 0; i < lis.length; i++){ (function (i) { lis[i].onclick = function (){
js实现点击每个li节点，都弹出其文本值及修改
10-20
本篇文章主要分享了js实现点击每个li节点，都弹出其文本值及修改的实例代码，具有很好的参考价值，需要的朋友一起来看下吧
js学习笔记--闭包应用(点击li输出索引号)
anan7410的博客
04-15 389
闭包(closure)指有权访问另一个函数作用域中的函数 一个作用域可以访问另一个函数的局部变量 fn外面的作用域可以访问fn内部的局部变量 闭包的主要作用：延伸了变量的作用范围 <body> <ulclass="nav"> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> ...
闭包应用-点击li输出当前li的索引号
weixin_43837268的博客
09-22 309
// 闭包应用-点击li输出当前li的索引号 // 1. 我们可以利用动态添加属性的方式 var lis = document.querySelector('.nav').querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onclick = function() {...
利用闭包的方式得到当前li的索引号
weixin_61871140的博客
06-20 124
正常通过for循环打印当前li索引号会因为for循环遍历是同步任务而.onclick是异步任务而无法获取索引（结果都为li.length），所以在for循环内创建一个立即执行函数再将.onclick任务放入，来获取当前索引，不过这种方法不推荐，点击事件需要用到i，所以内存中一直不会销毁，占用内存（内存泄漏）...
闭包点与聚点
我终于懂了（没懂）博客
02-28 1895
https://zhidao.baidu.com/question/582205.html 聚点一定是闭包点，闭包点不一定是聚点，还包括孤立点
闭包的知识点
weixin_44537264的博客
02-22 237
1、含义 闭包是指有权访问另外一个函数作用域中的变量的函数 闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。 2、变量的作用域 1、全局变量：在函数内部可以直接读取全局变量 var a = 5 //定义全局变量a function closure() { console.log('获取全局变量a：' + a
js闭包为什么可以实现点击li标签弹出对应的索引值，详解（一看就会）
weixin_45113337的博客
10-20 836
js闭包为什么可以实现点击li标签弹出对应的索引值，其主要的原因在于闭包函数可以访问它在被创建时所处的上下文环境，这使得每次执行闭包函数时所拿到的索引都是不同的
JS页面获取 session 值，作用域和闭包学习笔记
10-16
主要介绍了JS页面获取 session 值，作用域和闭包,结合具体实例形式分析了javascript与jsp交互获取session值、函数作用域及闭包相关操作技巧,需要的朋友可以参考下
JS 循环li添加点击事件 （闭包的应用）
11-28
废话不多说了，直接给大家贴代码了，具体代码如下所述： ...以上所述是小编给大家介绍的JS 循环li添加点击事件 （闭包的应用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的。
JS遍历ul下的li点击弹出li的索引的实现方法
11-22
首先我们需要一个html结构 <div> <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接下来看看我们的js代码 var li = document.getElementsByTagName('li'); for(var i = 0;i<li.length;i++){ (function(Index){ li[i].addEventListener(
JS实现点击li标签弹出对应的索引功能【案例】
10-17
主要介绍了JS实现点击li标签弹出对应的索引功能,结合具体实例形式分析了javascript事件响应、元素遍历等相关操作技巧,需要的朋友可以参考下
高效使用JavaScript闭包
02-26
在Node.js中，广泛采用不同形式的闭包来支持Node的异步和事件驱动编程模型。通过很好地理解闭包，您可以确保所开发应用程序的功能正确性、稳定性和可伸缩性。闭包是一种将数据与处理数据的代码相关联的自然方式，它...
点击获取li下标的几种方式
12-08 481
应用闭包时回溯了下几种关于获取li下标的方式 1.点击获取li下标 ———— 闭包 2.点击获取li下标 ———— es6 let 3.点击获取li下标 ———— 给元素添加下标属性index 4.点击获取li ———— 父级事件监听 　　思考了下，要获取下标，暂时只能想到添加下标的方法，因此未列出 遇到的问题 ...
点击li获取对应事件下标的四种方法
Arjen123123的博客
10-31 2156
点击li获取对应事件下标的四种方法 在原生JS中，对于多个li的事件下标，是无法通过循环来直接获取，因为点击一次是一次事件，但是循环的执行会在一次事件中就完毕。第二次事件执行时循环已经结束。无法直接获取下标。 但是我们可以通过以下四种方案来解决这一问题： 例子如下： <body> <h1>国庆放假安排</h1> <ul> <li...
javascript 怎么获取 li里面点击的元素索引呢？
u011482763的博客
11-28 1万+
用JS遍历就可以做，代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ul id="test"> ul> li>111li> li>222li>
js点击获取当前li标签的index值
热门推荐
szy1000的专栏
08-23 2万+
Document li{ background-color: red; } window.onload=function(){ var list =document.getElementsByTagName('li'); for(var i=0;i<list.length;i++){ list[i].onclick = (functio
javascript 闭包获取当前元素的索引
qiangD的博客
02-10 1344
html部分<button>button1</button> <button>button2</button> <button>button3</button> <button>button4</button>javascript 部分var btns = document.querySelectorAll('button'); var len = btns.length;for (i = 0; i
前18大旋转修整器企业占据全球87%的市场份额.docx
最新发布
05-06
前18大旋转修整器企业占据全球87%的市场份额
使用闭包访问属性，如何获得新值
06-09
如果你使用闭包来访问一个对象的属性时，闭包中存储的是该属性的引用，而不是该属性的值。如果在闭包外部修改了该属性的值，闭包中访问该属性时获取的是旧值。如果你想要在闭包中访问该属性时获得最新的值，可以使用 JavaScript 中的 getter 方法。 getter 方法是一种特殊的方法，用于获取对象的属性值。当你访问对象的属性时，JavaScript 引擎会自动调用该属性的 getter 方法，以获取最新的属性值。因此，如果你在闭包中访问一个对象的属性时，可以使用该属性的 getter 方法来获取最新的属性值。 例如，假设有一个对象 `obj`，其中包含一个属性 `value`。你可以使用以下方式定义该属性的 getter 方法： ```javascript var obj = { value: 0, get getValue() { return this.value; } }; ``` 在上面的代码中，`getValue` 方法是一个 getter 方法，用于获取对象的 `value` 属性的值。当你访问 `obj.getValue` 属性时，JavaScript 引擎会自动调用该 getter 方法，以获取最新的属性值。 如果你想在闭包中访问该属性时获得最新的值，可以使用以下方式： ```javascript var obj = { value: 0, get getValue() { return this.value; } }; var getValue = obj.getValue; console.log(getValue()); // 0 obj.value = 1; console.log(getValue()); // 1 ``` 在上面的代码中，我们将 `obj.getValue` 赋值给了一个新的变量 `getValue`。在闭包中访问 `getValue` 时，JavaScript 引擎会自动调用该 getter 方法，以获取最新的属性值，因此可以获取到最新的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值