<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul>
<li>我的下标是0</li>
<li>我的下标是1</li>
<li>我的下标是2</li>
<li>我的下标是3</li>
<li>我的下标是4</li>
<li>我的下标是5</li>
</ul>
<script type="text/javascript">
//要求:点击对应的li标签,弹出对应li标签的下标
//方法1;使用jq
// $("li").click(function(){
// alert($(this).index());
// })
//方法2 使用let
// var lis = document.getElementsByTagName("li");
// for(let i = 0 ;i<lis.length;i++ ){
// lis[i].οnclick= function(){
// alert("我的下标是"+i+"号");
// }
// }
//方法3 使用 IIFE 解决
// var lis = document.getElementsByTagName("li");
// for(var i = 0 ;i<lis.length;i++ ){
// (function(i){
// lis[i].οnclick= function(){
// alert("主人我是"+i+"号");
// }
// })(i)
// }
//方法四,给元素自定义下标属性
var lis = document.getElementsByTagName("li");
for(var i = 0 ;i<lis.length;i++ ){
lis[i].xiabiao = i;
lis[i].οnclick= function(){
alert("nihao我是"+this.xiabiao+"号");
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul>
<li>我的下标是0</li>
<li>我的下标是1</li>
<li>我的下标是2</li>
<li>我的下标是3</li>
<li>我的下标是4</li>
<li>我的下标是5</li>
</ul>
<script type="text/javascript">
//要求:点击对应的li标签,弹出对应li标签的下标
//方法1;使用jq
// $("li").click(function(){
// alert($(this).index());
// })
//方法2 使用let
// var lis = document.getElementsByTagName("li");
// for(let i = 0 ;i<lis.length;i++ ){
// lis[i].οnclick= function(){
// alert("我的下标是"+i+"号");
// }
// }
//方法3 使用 IIFE 解决
// var lis = document.getElementsByTagName("li");
// for(var i = 0 ;i<lis.length;i++ ){
// (function(i){
// lis[i].οnclick= function(){
// alert("主人我是"+i+"号");
// }
// })(i)
// }
//方法四,给元素自定义下标属性
var lis = document.getElementsByTagName("li");
for(var i = 0 ;i<lis.length;i++ ){
lis[i].xiabiao = i;
lis[i].οnclick= function(){
alert("nihao我是"+this.xiabiao+"号");
}
}
</script>
</body>
</html>