【前言】
学生练习轮播时遇到一个问题，就是在HTML中写了四个< li >标签，想给每个li 绑定一个点击事件，通过点击每个li ,弹出它对应的索引。但是运行的时候发现点击任何一个li都弹出的是4，而不是对应的li索引
【主体】
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<script type="text/javascript">
var li_area = document.getElementsByTagName("li");
for(var i=0;i<li_area.length;i++){
li_area[i].onclick = function(){
console.log(i)
}
}
</script>
</body>
</html>
原因解析：在点击li元素时，触发点击事件，此时for循环已经结束，其中得 i 已经变为4。因此触发事件中alert(i)函数输出的永远是4。
解决方案：
（1）给每个li定义一个属性索引赋值
var li_area = document.getElementsByTagName("li");
for(var i=0;i<li_area.length;i++){
li_area[i] = i;//给每个li定义一个属性索引赋值
li_area[i].onclick = function(){
console.log(this.index)
}
}
（2）使用匿名函数
由于是按值传递，参数i会传递给参数 num,这样的话，每执行一次for循环，就会给li [i]创建一个num副本，也就是在内存中开辟一个空间存入num的值，这样每个li都会有对应的num值。
var li_area = document.getElementsByTagName("li");
for(var i=0;i<li_area.length;i++){
(function(num){
li_area[num].onclick = function(){console.log(num)}
})(i)
}
（3）匿名函数与return结合
var li_area = document.getElementsByTagName("li");
for(var i=0;i<li_area.length;i++){
li_area[i].onclick = function(n){
return function(){alert(n)}
}(i);
}
.
相关推荐
### JavaScript 循环给 li 绑定事件实现点击 li 弹出其索引值和内容的方法 在前端开发中，经常需要对 DOM 元素进行操作，比如为多个元素添加事件监听器。本文将详细介绍如何使用原生 JavaScript 和 jQuery 来实现...
这样一来，每个li节点点击时弹出的内容都是根据其在数组中的索引位置来确定的，实现了参数的差异化绑定。 在JavaScript中，除了`getElementsByTagName`之外，还可以使用`querySelectorAll`或`getElementById`等方法...
本文通过几个方法介绍如何使用JavaScript为li元素集合绑定点击事件，并且使每个li元素在被点击时显示其在集合中的索引下标。通过这几种方法的演示，我们可以学习到JavaScript中事件绑定、闭包、作用域链等概念的应用...
在JavaScript编程中，实现点击`<li>`标签弹出对应的索引功能是一项常见的交互需求，尤其是在构建列表式用户界面时。这个案例通过两种方法详细解释了如何实现这一功能，同时也涉及到了JavaScript事件响应、元素遍历等...
当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。 首先，`v-for`语法的基本形式是： ```html ...
这篇文章通过一个实用的例子演示了如何在循环中通过闭包来为每个li元素绑定点击事件处理器，同时保持每个事件处理器独立的作用域，使得点击不同的li元素时可以弹出对应的索引，体现了闭包在JavaScript编程中的实际...
在Web开发中，实现"用户选中商品，实现动态绑定，点击一个一个往后进行索引"的功能是一项常用的技术，尤其适用于商品列表等大数据量场景，帮助用户快速定位和浏览商品。这一功能通常涉及到JavaScript（JS）、jQuery...
在给定的实例中，我们看到一个列表项（li元素）与对应的内容盒子（div元素）通过点击按钮来显示和隐藏。这是通过为按钮绑定点击事件处理函数实现的。当点击某个按钮时，它会添加一个“current”类到自身，同时移除...
这个事件处理函数会在每个`li`元素被点击时执行，弹出一个提示框显示“事件绑定成功！”的消息。 **总结** 在实际开发中，动态添加元素和绑定事件是常见的需求，特别是在处理数据驱动的界面或响应用户操作时。...
- 为每个 `<li>` 元素添加样式类 `selected` 来突出显示选中的项，并绑定鼠标悬停和点击事件来改变选中的项或执行搜索。 ### 二、键盘事件处理 #### 方向键上下选择功能 为了实现键盘上下键选择 `<li>` 项的功能...
在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。当点击某个li元素时，它的字体颜色会变为红色。 首先，让我们分析代码： ```html v-for="(item, index) in ...
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面，包括便捷的数据绑定和组件化。在Vue.js中，`v-for`指令是用于遍历数组或对象的，它是实现列表渲染的关键工具。本篇文章将深入探讨`v-for...
在Vue.js中，`v-for`指令用于遍历数组或对象，从而在DOM中渲染多个元素。本篇文章将深入探讨如何在使用`v-for`循环时动态地为每个元素绑定唯一的ID，这对于创建可交互的组件和跟踪元素状态至关重要。 首先，让我们...
这就是为什么在for循环绑定事件后点击各个li元素时，弹出的总是“你点击了第5项”。 4. 使用立即执行函数表达式（IIFE）改进事件绑定： 为解决上述问题，可以利用立即执行函数表达式（IIFE）来为循环中的每个元素...
在上述示例代码中，我们使用了for循环来遍历列表中所有的li元素，并将mousemove和mouseout事件处理函数绑定到每个li元素上。 二、事件处理函数的作用域 在事件处理函数中，我们可以访问当前的li元素对象，并对其...
例如，`v-bind:name="i"` 将`ul`的`name`属性绑定到`flows`数组的索引`i`，`v-for="(flow, i) in flows"` 遍历`flows`数组，为每个`flow`创建`li`元素。 6. **响应式数据**：当`items`或`flows`数组中的数据发生...
7. **优化与兼容性**：为了提高性能，可以考虑使用事件委托来绑定点击事件，这样只需在一个父元素上绑定事件，而不是每个缩略图。同时，确保代码兼容不同的浏览器，特别是较旧版本的IE。 总结来说，"jQuery图片相册...
在这个例子中，无论点击哪个`<li>`，`currentTarget`始终指向绑定事件的`<li>`元素。 - `target`：返回实际触发事件的元素，即用户点击的具体元素。如果`click`事件在子元素上冒泡，`target`会指向那个子元素。 在...
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...