【前言】
学生练习轮播时遇到一个问题，就是在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);
}
.
相关推荐
js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法
在JavaScript编程中，实现点击`<li>`标签弹出对应的索引功能是一项常见的交互需求，尤其是在构建列表式用户界面时。这个案例通过两种方法详细解释了如何实现这一功能，同时也涉及到了JavaScript事件响应、元素遍历等...
当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。 首先，`v-for`语法的基本形式是： ```html ...
在Web开发中，实现"用户选中商品，实现动态绑定，点击一个一个往后进行索引"的功能是一项常用的技术，尤其适用于商品列表等大数据量场景，帮助用户快速定位和浏览商品。这一功能通常涉及到JavaScript（JS）、jQuery...
本文通过一段实例代码给大家讲解了js索引下标之li集合绑定点击事件的相关知识，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
这个事件处理函数会在每个`li`元素被点击时执行，弹出一个提示框显示“事件绑定成功！”的消息。 **总结** 在实际开发中，动态添加元素和绑定事件是常见的需求，特别是在处理数据驱动的界面或响应用户操作时。...
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面，包括便捷的数据绑定和组件化。在Vue.js中，`v-for`指令是用于遍历数组或对象的，它是实现列表渲染的关键工具。本篇文章将深入探讨`v-for...
在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。当点击某个li元素时，它的字体颜色会变为红色。 首先，让我们分析代码： ```html v-for="(item, index) in ...
在上述示例代码中，我们使用了for循环来遍历列表中所有的li元素，并将mousemove和mouseout事件处理函数绑定到每个li元素上。 二、事件处理函数的作用域 在事件处理函数中，我们可以访问当前的li元素对象，并对其...
在Vue.js中，`v-for`指令用于遍历数组或对象，从而在DOM中渲染多个元素。本篇文章将深入探讨如何在使用`v-for`循环时动态地为每个元素绑定唯一的ID，这对于创建可交互的组件和跟踪元素状态至关重要。 首先，让我们...
7. **优化与兼容性**：为了提高性能，可以考虑使用事件委托来绑定点击事件，这样只需在一个父元素上绑定事件，而不是每个缩略图。同时，确保代码兼容不同的浏览器，特别是较旧版本的IE。 总结来说，"jQuery图片相册...
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...
例如，`v-bind:name="i"` 将`ul`的`name`属性绑定到`flows`数组的索引`i`，`v-for="(flow, i) in flows"` 遍历`flows`数组，为每个`flow`创建`li`元素。 6. **响应式数据**：当`items`或`flows`数组中的数据发生...
在给定的代码中，开发者通过为每个`li`元素添加一个名为`i`的自定义属性，并将当前的循环索引赋值给它，巧妙地解决了这个问题。这样，当鼠标悬停在某个`li`元素上时，`alert`会显示该元素存储的`i`值，而不是循环...
在Vue.js中，`v-for`指令用于循环渲染列表数据，而通过添加点击事件，我们可以实现用户交互，例如点击某一行获取该行的数据。本文将详细介绍如何在Vue中使用`v-for`结合点击事件来获取当前行的数据以及事件对象。 ...
在这个案例中，我们可以使用`<div>`元素创建购物车和弹出清单的容器，并使用`<ul>`和`<li>`元素来展示商品列表。 2. **CSS3**：CSS3提供了丰富的样式和动画效果，如阴影、渐变、圆角、转换（transform）和过渡...
在`v-for`循环的每个`<li>`元素中，我们绑定了一个点击事件`@click='getIndex(index)'`。当用户点击这个列表项时，`getIndex`方法会被调用，并将对应的`index`值作为参数传递。在`getIndex`方法内部，我们可以根据这...
在这个例子中，无论点击哪个`<li>`，`currentTarget`始终指向绑定事件的`<li>`元素。 - `target`：返回实际触发事件的元素，即用户点击的具体元素。如果`click`事件在子元素上冒泡，`target`会指向那个子元素。 在...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery动态删除CSS中的`UL`和`LI`列表项，以及如何实现列表的自动对齐，从而营造...