博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何使用原生js实现通过点击来弹出下标(四种方法)
阅读量:4599 次
发布时间:2019-06-09

本文共 873 字,大约阅读时间需要 2 分钟。

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

<!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

你可能感兴趣的文章
基于YOLO的Autonomous driving application__by 何子辰
查看>>
javascript中的继承
查看>>
iOS-如何写好一个UITableView
查看>>
如何在Objective-C中实现链式语法
查看>>
select2 下拉搜索控件
查看>>
WebAPI常见的鉴权方法,及其适用范围
查看>>
WPF实现QQ群文件列表动画(一)
查看>>
08. 删除重复&海量数据
查看>>
重新想象 Windows 8 Store Apps (71) - 其它: C# 调用 C++
查看>>
发布mvc遇到的HTTP错误 403.14-Forbidden解决办法
查看>>
jvm内存模型和内存分配
查看>>
4.循环结构
查看>>
记录一些好用的工具
查看>>
inner join on 三表查询四表查询5表查询不管多少表都可以
查看>>
超链接样式设置(去下划线)(转)
查看>>
[求助]linux同一目录可否挂载多个数据盘?
查看>>
restcontroller和controller区别
查看>>
2016012003+陈琦+散列函数的应用及其安全性
查看>>
Android 状态栏通知Notification、NotificationManager详解
查看>>
如何在Google Map中处理大量标记(ASP.NET)(转)
查看>>