<!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时,我怎么判断我点击的是哪个的更多相关文章

  1. 当有多个相同的DIV时,我怎么判断我点击的是哪个嘞

    链接:https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral 序言 这是我曾经面试 ...

  2. 图片大于div时的居中显示

    当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...

  3. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  5. 使用Redmine的PHP API时，如何判断需求是否为原子需求

    使用Redmine的PHP API时,如何判断需求是否为原子需求 使用redmine的PHP接口时,怎样才能判断需求是否为原子需求呢,下面给出具体的做法: /** * 判断是否为原子需求, 即是否依然 ...

  6. IDE连接数据库时测试Test Connection 无法点击

    问题: IDE连接数据库时测试Test Connection 无法点击 解决: IDE缺少对应的驱动 第一步: 点击驱动 第二步: 下载驱动 注意:不同版本的驱动下载位置不同,此版本为2017

  7. 大div中嵌套小div，点击大div时隐藏，点击小div不隐藏

    给小div添加一个click事件 <div onClick="event.cancelBubble = true">  //小div

  8. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  9. 滑动表层div时 禁止底层滑动

    $(".container").bind("touchstart", function (events) { startX = events.originalE ...

随机推荐

  1. c#使用SharpZipLib对二进制数据进行压缩和解压

    首先需要下载SharpZipLib,下载地址:http://icsharpcode.github.io/SharpZipLib/ 需要引入命名空间: using ICSharpCode.SharpZi ...

  2. Java中 intValue，parseInt，Valueof 这三个关键字的区别

    intValue()是把Integer对象类型变成int的基础数据类型: parseInt()是把String 变成int的基础数据类型: Valueof()是把给定的String参数转化成Integ ...

  3. 在RHEL6_Oracle_Linux_6上生成正确的udev_rule_规则文件

    1. #首先确认是 Linux 6.0以上版本 [root@vrh6 dev]# cat /etc/issue          Oracle Linux Server release 6.2Kern ...

  4. Kubernetes 中文文档

    Kubernetes 中文文档 如果想学习 Kubernetes 的小伙伴,可以参考如下文档学习: https://www.kubernetes.org.cn/docs 文档中详细讲解了 k8s 的设 ...

  5. ALV程序设计

    ALV 全称SAP LIST VIEW, 是SAP所提供的一个强大的数据报表显示工具. ALV显示格式分为GRID及LIST两种,两者所显示数据一致, GRID模式在每个输出字段提供选择按钮,允许用 ...

  6. LeetCode.1021-删除最外面的括号(Remove Outermost Parentheses)

    这是小川的第380次更新,第408篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第242题(顺位题号是1021).有效的括号字符串为空(""),&qu ...

  7. Docker面试题（二）

    什么是虚拟化? 虚拟化允许您在相同的硬件上运行两个完全不同的操作系统.每个客户操作系统都经历了引导,加载内核等所有过程.您可以拥有非常严格的安全性,例如,客户操作系统无法完全访问主机操作系统或其他客户 ...

  8. GIS学习之栅格数据

    栅格数据用一个规则格网来描述与每一个格网单元位置相对应的空间现象特征的位置和取值.在概念上,空间现象的变化由格网单元值的变化来反映.地理信息系统中许多数据都用栅格格式来表示.栅格数据在许多方面是矢量数 ...

  9. [IJCAI-17 口碑商家客流量预测]

    IJCAI-17 口碑商家客流量预测               第 1 赛季截止日期        2017/03/14 赛制介绍 重要时间2月8日 08:00: 评测启动3月7日 10:00: 报 ...

  10. ERROR 1709 (HY000): Index column size too large. The maximum column size is 767 bytes.

    MySQL版本5.6.35 在一个长度为512字符的字段上创建unique key报错 CREATE DATABASE dpcs_metadata DEFAULT CHARACTER SET utf8 ...