点击a标签弹出相应的序号
结合网上大家的方法总结了四种方法,欢迎补充
直接上代码,有注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击a标签弹出相应的序号</title>
<style>
a{
text-decoration: none;
border: 1px solid #ccc;
}
.quan{
width: 300px;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="quan">
<a href="javascript:;">0</a>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
<a href="javascript:;">7</a>
<a href="javascript:;">8</a>
<a href="javascript:;">9</a>
</div>
<!-- 方法三 -->
<!-- 引入jquery -->
<script src="./js/jquery.min.js"></script>
<script>
// 获取元素
let a=document.querySelectorAll('a')
// 1、方法一
// 使用let循环
// for(let i=0;i<a.length;i++){
// a[i].addEventListener('click',function(){
// console.log(i)
// })
// }
// 2、方法二
// 使用var 没有块级作用域,点击的时候都是输出10 用自定义属性,直接得到自定义属性的序号
// for(var i=0;i<a.length;i++){
// a[i].setAttribute('index',i)//这里也可以不写,直接在html里面加
// a[i].addEventListener('click',function(){
// // console.log(i)//输出的都是10
// console.log(this.getAttribute('index'))
// })
// }
// 3、方法三
// 用jquery
// $(a).click(function(){
// console.log($(this).index())
// })
// 4、方法四
// 使用闭包,闭包会浪费内存喔,能不使用还是尽量避免
for(var i=0;i<a.length;i++){
(function(j){//这是一个立即执行函数
a[j].addEventListener('click',function(){
console.log(j)
})
})(i)//传递参数i,在上面用j接收
}
</script>
</body>
</html>