当有多个相同的DIV时,我怎么判断我点击的是哪个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断点击的是哪个div</title>
<style>
.node {
width: 200px;
height: 50px;
line-height: 50px;
background: #ed145b;
margin-bottom: 10px;
text-align: center;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="node">点我啊</div>
<div class="node">点我啊</div>
<div class="node">点我啊</div>
<div class="node">点我啊</div>
<div class="node">点我啊</div>
<script>
var oDiv = document.getElementsByClassName("node");
for (var i = 0; i < oDiv.length; i++) {
(function(i) {
oDiv[i].onclick = function() {
alert(i);
}
})(i)
}
</script>
</body>
</html>
使用一下js类库吧
上面的原生js固然可以实现功能,但是不够精简。而且很多时候,我们在工作中都会使用一些js类库,比如:jQuery,Zpeto(移动端使用)什么的。所以在此也贴上jQuery实现该功能的代码。
$('.node').on('click', function(e) {
alert($(this).index());
});
这样一来代码便简洁了很多
当有多个相同的DIV时,我怎么判断我点击的是哪个的更多相关文章
- 当有多个相同的DIV时,我怎么判断我点击的是哪个嘞
链接:https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral 序言 这是我曾经面试 ...
- 图片大于div时的居中显示
当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...
- js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到
js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- 使用Redmine的PHP API时,如何判断需求是否为原子需求
使用Redmine的PHP API时,如何判断需求是否为原子需求 使用redmine的PHP接口时,怎样才能判断需求是否为原子需求呢,下面给出具体的做法: /** * 判断是否为原子需求, 即是否依然 ...
- IDE连接数据库时测试Test Connection 无法点击
问题: IDE连接数据库时测试Test Connection 无法点击 解决: IDE缺少对应的驱动 第一步: 点击驱动 第二步: 下载驱动 注意:不同版本的驱动下载位置不同,此版本为2017
- 大div中嵌套小div,点击大div时隐藏,点击小div不隐藏
给小div添加一个click事件 <div onClick="event.cancelBubble = true"> //小div
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
- 滑动表层div时 禁止底层滑动
$(".container").bind("touchstart", function (events) { startX = events.originalE ...
随机推荐
- Linux如何安装卸载软件
Linux 中如何卸载已安装的软件. Linux软件的安装和卸载一直是困扰许多新用户的难题.在Windows中,我们可以使用软件自带的安装卸载程序或在控制面板中的“添加/删除程 序” 来实现.与其相类 ...
- Cas服务器以及客户端搭建
一.搭建cas服务器 官网:http://jasig.github.io/cas/ Cas Server 下载:http://developer.jasig.org/cas/ Cas Client 下 ...
- python模块------pyautogui
安装 pip install pyautogui 基本使用 查询 screenWidth, screenHeight = pyautogui.size() # 屏幕尺寸 mouseX, mouseY ...
- Arrays类与Collections类
java.util.Arrays类包含一个静态的工厂,允许数组被视为列表.以下是关于数组的要点: 这个类包含了各种方法来操作数组(比如排序和搜索). 在这个类中的方法抛出NullPointerExce ...
- gromacs2018使用踩坑记--insert-molecules
1] gmx插入分子[ -f [<.gro / .g96 / ...>] ] [ -ci [<.gro / .g96 / ...>] ] [ -ip [<.dat> ...
- Git中.gitignore忽略文件(maven项目)
使用情景: 有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们 解决方案: 在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略 ...
- 一键发布shell脚本
1.配置集群间免密登录 (1)配置host:vim /etc/hosts (2)生成公钥 :ssh-keygen -t rsa -P '' 这时会提示生成的公钥的存放地址,直接回车,公钥生成成功 (3 ...
- SparseLDA算法
2 SparseLDA算法 本章将介绍一种Gibbs Sampling算法的加速算法——SparseLDA [9],它主要利用LDA 模型的稀疏性,来达到加速以及节省内存的目的,是一种精确算法(没有近 ...
- wpf 虚拟键盘 对外部程序
对外部程序,以记事本为例,xaml中设置模拟按键的控件 Focusable="False": /// <summary> /// 发送按键 /// </summa ...
- python基本成分
一.常量 常量即代表不变的量,其实在python里不存在真正不变的量,只不过潜规则在我们想定义一个常量的时候变量名为大写即为常量: 比如:一个人的年纪不断的增长,那么年纪就叫常量,如果这个人死了,那么 ...