<!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. dell 9代cpu新机器安装centos7.7 bios 配置

    1.步骤如下,按f2或f12选择进入bios,每一步配置的内容如图所示,U盘写镜像,引导U盘启动,安装.(电源管理自启动那几个步骤可以不做)

  2. Vue路由器的简单实现

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 全面解读php-开发环境及配置

    一.版本控制软件 1.集中式 (CVS和 SVN) 中间有一个中央服务器,所有的客户机都会把版本信息上传到中央服务器里,版本信息只在中央服务器里保存,当我们去上传或者下载的时候 ,都是从中央服务器来连 ...

  4. P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…

    P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…   大写祖母转数字  -64   发现dalao   #include<bits/stdc++.h> usi ...

  5. 从 AVFrame 中取出帧(YUV)保存为 Mat 格式

    由于 cnblogs 不支持科学公式,完整内容请移步原文链接 原文地址:从 AVFrame 中取出帧(YUV)保存为 Mat 格式 从 AVFrame 中取出帧(YUV)保存为 Mat 格式 本文档针 ...

  6. 用xmmp+openfire+smack搭建简易IM实现

    功能实现:注册,登录,单聊表情,文本,图片,语音的发送接收,添加好友,删除好友,查找好友,修改密码,消息提醒设置,获取离线消息等功能 1.前期准备 1.下载opnefire软件:https://www ...

  7. Activity 怎么和 Service 绑定，怎么在 Activity 中启动自己对应的 Service？

    Activity 通过 bindService(Intent service, ServiceConnection conn, int flags)跟 Service 进行绑定,当绑定成功的时候 Se ...

  8. 操作MySQL出错提示“BLOB/TEXT column request_data in key specification without a key length”解决办法

    错误原因: 查阅资料后才知道,原来Mysql数据库对于BLOB/TEXT这样类型的数据结构只能索引前N个字符.所以这样的数据类型不能作为主键,也不能是UNIQUE的.所以要换成VARCHAR,但是VA ...

  9. 【工具】rinetd 使用教程（linux 下的端口转发工具 ）

    日期:2019-07-30 20:00:36 更新: 作者:Bay0net 介绍:使用 rinetd 来转发某端口的流量. 0x01. 安装 官网 RINETD 安装方法很简单,一条语句就 OK 了. ...

  10. C语言博客作业06

    一.表格 问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/988 ...