老师 为什么li点击时全部alert 4 呢
来源：2-3 选择器的优势
吾怯二日
2020-08-08 08:45:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的优势</title>
<style>
li{
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="tt">我同步了吗</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<table id="tb">
<tr>
<td>第一行</td>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td>第四行</td>
</tr>
<tr>
<td>第五行</td>
<td>第五行</td>
</tr>
</table>
<script src="js/zepto.js"></script>
<script>
$(document).ready(function(){
/*
1 完善的处理机制
2 当检测某个元素是否存在的时候
3 事件写法
4 特定表格隔行变色
*/
//1 完善的处理机制
// var divEl = document.getElementById('tt');
// tt.className = "hello";
//zepto即使找不到DOM对象 也不会报错
//$('#tt').addClass('hello');
//2 当检查某个元素是否存在时 即使不存在也找的到
//$中只要是数字或者字符串 得到的结果就认定是true
//$返回的是一个数组 要根据长度判断
if($('#tt').length > 0){
console.log('tt元素已找到');
}
//3 事件写法
//传统写法
var items = document.getElementsByTagName('li');
for(var i=0;i < items.length;i++){
items[i].onclick = function(){
alert(i);
}
}
})
</script>
</body>
</html>
1回答
-
同学你好，因为for循环在页面打开时，就会立马执行了。i为4时，不符合条件跳出循环。而事件不会立马执行，需要触发点击这个动作才会执行。所以点击任意一个按钮时，for早就执行完毕了，注意前面说到i为4了，所以每一个事件拿到的都是4。
如果想要拿到的值不一样，可以把事件放在函数中，通过参数把i值传入。因为前面学过了，函数会形成一个局部作用域，每一次循环调用一次函数，就会形成一个局部作用域。而参数是局部变量，每一个作用域的参数不会互相影响，拿到的参数值自然就不一样了。示例：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1
相似问题