<!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. cmd 查看域名对应的 IP

    1.cmd nslookup 2.输入 域名,例如:www.baidu.com

  2. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  3. python3使用ltp语言云

    text="我爱自然语言处理." text=str(text) #text=urllib.quote(text) text=urllib.parse.quote(text) def ...

  4. 浏览器端-W3School-JavaScript：Location 对象

    ylbtech-浏览器端-W3School-JavaScript:Location 对象 1.返回顶部 1. Location 对象 Location 对象 Location 对象包含有关当前 URL ...

  5. pip安装selenium时，报错“You are using pip version 10.0.1, however version 18.0 is available.”的问题

    pip安装selenium,pip install selenium 类型这样错误 1  原因可能不是以管理员身份运行cmd安装selenium 2  解决方式 也是要管理员身份运行 重点在最后一句 ...

  6. Lombok 学习指南

    转自:https://segmentfault.com/a/1190000020864572 一.Lombok 简介 Lombok 是一款 Java 开发插件,使得 Java 开发者可以通过其定义的一 ...

  7. redhat7.5 替换yum源

    Redhat 7自带的yum源需要付费注册,未注册情况下会报如下错误,且用yum repolist all检查源数目为0.这时候需要将RedHat 7自带的yum源 替换成CentOS 7免费源 解决 ...

  8. Day06:方法 / 猜字母游戏

    JAVA方法 方法就是处理一个业务所需要编写的代码的代码段 方法特性 一个方法处理一个业务 方法代码编写,不和其他方法冲突 方法定义后可以随意调用 将main方法中的所有代码分散到各个普通方法中 减少 ...

  9. 面向对象及os模块、socket模块

    1.面向对象及面向过程 1)面向过程:核心过程二字,过程即解决问题的步骤,就是先干什么后干什么 基于该思想写程序就好比在这是一条流水线,是一种机械式的思维方式 优点:复杂的过程流程化 缺点:扩展性差 ...

  10. 【VS开发】Caffelib中出现的问题：强制链接静态库所有符号(包括未被使用的)

    C++程序在链接一个静态库时,如果该静态库里的某些方法没有任何地方调用到,最终这些没有被调用到的方法或变量将会被丢弃掉,不会被链接到目标程序中.这样做大大减小生成二进制文件的体积.但是,某些时候,即使 ...