闭包的应用-点击每个li标签，弹出索引值（一）

最新推荐文章于 2022-10-20 19:29:19 发布
最新推荐文章于 2022-10-20 19:29:19 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： 原生js开发 

点击每个li标签，弹出索引值
 <ul>
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
                    <li>010</li>
  </ul>

错误的方法

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <title></title>
    <script>
    window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            for (var i=0;i<aLi.length;i++){
                    aLi[i].onclick = function(){        //当点击时for循环已经结束
                    alert(i);
                    };
            }
    }
    </script>
            
    </head>
    <body>
            <ul>
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
                    <li>010</li>
            </ul>
    </body>
    </html>

这样的话点击任何一个li标签，都是弹出4


用闭包实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <title></title>
    <script>
    window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            for (var i=0;i<aLi.length;i++){
                    (function(i){
                            aLi[i].onclick = function(){
                                    alert(i);
                            };
                    })(i);
            }
            };
    </script>
            
    </head>
    <body>
            <ul>
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
            </ul>
    </body>
    </html>


转自https://segmentfault.com/a/1190000000652891

u010513603
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现点击＜li＞标签弹出其索引值
springLilly的博客
02-09 2835
根据上面HTML，用JS实现点击 li 输入当前 li 节点在 ul 列表中的索引 <ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <ul> 1.获取所有的li元素，然后进行循环给每个li绑定事件 在这个方法中，有一些小问题 （1）d
点击 li 弹出其 index
又是再见?
09-25 474
html机构： 我是第1个li 我是第2个li 我是第3个li 1、使用JS闭包的方法： var liObj = document.getElementById("test").getElementsByTagName("li"); for(i=0;i liObj[i].index = i; liObj[i].onclick = function(){ alert(l
js闭包为什么可以实现点击li标签弹出对应的索引值，详解（一看就会）
weixin_45113337的博客
10-20 869
js闭包为什么可以实现点击li标签弹出对应的索引值，其主要的原因在于闭包函数可以访问它在被创建时所处的上下文环境，这使得每次执行闭包函数时所拿到的索引都是不同的
案例:点击li标签弹出对应的索引
庚中
10-22 1925
需求:点击li标签,弹出对应的索引 先看效果: html结构: &lt;ul id="ul1"&gt; &lt;li&gt;我是li标签1&lt;/li&gt; &lt;li&gt;我是li标签2&lt;/li&gt; &lt;li&gt;我是li标签3&lt;/li&gt; &lt;li&gt;我是li标签4&lt;/l
利用闭包实现点击每个li输出对应的索引
weixin_48079602的博客
04-15 613
<!DOCTYPE html> <html lang="zh-cn"> <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&gt
JS实现点击li标签弹出对应的索引功能【案例】
10-17
然后，为每个`<li>`标签添加一个点击事件监听器，当点击事件触发时，通过`this.getAttribute('index')`获取到`index`属性的值，并将其显示在警告框中。 以下是方法一的完整代码示例： ```html <!DOCTYPE html> ...
js实现点击每个li节点，都弹出其文本值及修改
10-20
本篇文章主要分享了js实现点击每个li节点，都弹出其文本值及修改的实例代码，具有很好的参考价值，需要的朋友一起来看下吧
JS 循环li添加点击事件 （闭包的应用）
11-28
废话不多说了，直接给大家贴代码了，具体代码如下所述： ...以上所述是小编给大家介绍的JS 循环li添加点击事件 （闭包的应用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的。
实现点击列表弹出列表索引的两种方式
10-27
使用利用事件冒泡委托给列表的父节点去处理的方式第二种方式就是使用闭包了，感兴趣的你可以参考下本文，或许对你学习js有所帮助
JS常见问题之为什么点击弹出的i总是最后一个
10-23
标题中的“JS常见问题之为什么点击弹出的i总是最后一个”指的是在JavaScript编程中，一个常见的问题：当点击页面上的多个元素（例如`<li>`列表项）时，预期是弹出对应元素的索引，但实际上总是弹出最后一个元素的...
闭包——闭包的应用之点击li输出当前li的索引号
小鱼儿~同学
10-07 501
html代码如下： <ul class="nav"> <li>111</li> <li>222</li> <li>999</li> <li>666</li> <li>888</li> <ul/> 1.我们可以利...
JS 闭包应用-点击li输出索引号（面试常问经典面试题）
m0_48259951的博客
07-01 569
闭包 一. 变量作用域 变量根据作用域的不同分为两种：全局变量和局部变量。 函数内部可以使用全局变量。 函数外部不可以使用局部变量。 当函数执行完毕，本作用域内的局部变量会销毁。 二. 什么是闭包 闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计 简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。 <script> function fn1(){ // fn1 就是闭包函数 　　　　var num = 10
js学习笔记--闭包应用(点击li输出索引号)
anan7410的博客
04-15 403
闭包(closure)指有权访问另一个函数作用域中的函数 一个作用域可以访问另一个函数的局部变量 fn外面的作用域可以访问fn内部的局部变量 闭包的主要作用：延伸了变量的作用范围 <body> <ulclass="nav"> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> ...
利用闭包实现点击li输出对应索引
Anana13的博客
08-20 542
<body> <ul class="nav"> <li>javaScript</li> <li>C语言</li> <li>Java</li> <li>Vue</li> </ul> <script> var lis = document.querySelector('.nav').querySelectorAll('
对于一个"ul"列表,单击弹出每个"li"对应的索引
马优晨
06-12 2422
我们经常会遇见在遍历一个ul的时候，需要获得每一个li的索引值，或者是单击每个li弹出其对应的索引值。这里使用闭包的方式来实现这个常见事件。代码如下所示：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="author
闭包应用-点击li输出当前li的索引号
weixin_43837268的博客
09-22 314
// 闭包应用-点击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_47558015的博客
05-16 269
闭包 就是有权访问另一个函数作用域中变量的函数 主要作用 延伸了变量的作用范围 点击li输出索引号 <ul class="nav"> <li>巧克力</li> <li>酸奶</li> <li>可可豆</li> <li>沙冰</li> </ul> var lis = document.q
JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的索引？
热门推荐
clh386的博客
11-17 1万+
刚开始遇到一个问题就是我在HTML中写了四个< li >标签，想给每个li 绑定一个点击事件，通过点击每个li ,弹出它对应的索引，刚开始是这么做的：<html> <head> <title>无标题文档</title> <script type="text/javascript"> window.onload=function(){ var li=document.getElementsByTagN
鼠标点击li元素，弹出各自索引值
luozc_web的博客
11-19 3450
这篇博客我主要是把鼠标点击li元素，弹出各自索引值的几种方法进行总结。问题：如下代码所示有好多li元素。实现的效果是当鼠标点击某个li元素时弹出自己的索引值（当然这里不是弹出它的innerHTML,这是凑巧索引值和它的innerHTML相等） <ul id="ul1"> <li>0</li> <li>1</li> <li>2</li>
用闭包写一个计算移动平均值例子demopython
最新发布
05-24
好的，我可以为您展示一个用闭包实现计算移动平均值的示例Python代码，如下所示： ```python def moving_average(): window = [] def inner(num): window.append(num) if len(window) > 5: window.pop(0) return sum(window) / len(window) return inner ma = moving_average() print(ma(4)) # 输出 4.0 print(ma(6)) # 输出 5.0 print(ma(3)) # 输出 4.333333333333333 print(ma(5)) # 输出 4.5 print(ma(7)) # 输出 5.0 ``` 以上代码实现了一个移动平均值计算器，它每次接收一个浮点数并返回当前平均值。它通过闭包来保持window这个列表的状态，从而能够在不同的函数调用之间共享状态，并且可以记录前5个数字的平均值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值