如何使用原生js实现通过点击来弹出下标（四种方法）

最新推荐文章于 2022-02-09 13:41:27 发布

weixin_30644369

最新推荐文章于 2022-02-09 13:41:27 发布

阅读量346

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chuanzhou/p/7212247.html

版权

可以通过直接复制以下代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="../jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lis = document.querySelectorAll('li');
//方法一
/*for (var i = 0; i < lis.length; i++) {
(function(num){
lis[num].onclick = function(){
alert(num);
}
})(i);
}*/
//方法二
/*for (var i = 0; i < lis.length; i++) {
//通过立即函数返回函数
lis[i].onclick =(function(num){
return function(){
alert(num);
}
})(i);
}*/
//方法三
/*$(function(){
$('li').click(function(){
console.log("1111");
alert($(this).index());
});
})*/
//方法四
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick =function(){
alert(this.index);
}
}
</script>
</html>

转载于:https://www.cnblogs.com/chuanzhou/p/7212247.html

weixin_30644369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用原生js实现通过点击来弹出下标（四种方法）

可以通过直接复制以下代码实现：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>1</li> &lt...
复制链接

扫一扫