当有多个相同的DIV时,我怎么判断我点击的是哪个嘞
链接:https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral
序言
这是我曾经面试的时候遇到过的一道面试题。非常基础,而且出现频率奇高,所以就留心总结一下。原题目如下:
1到100个节点,点击其中任意一个节点,弹出节点所在的序号。
问题就是如此之简单直接,但我对这扑面而来的题目似乎还没有能力完全做好准备。回想起当时的能力真是渣到醉的不行。不过“二哈”的我把这点当做一个需要我努力的理由。
既然已经很差了,学一点也不会比现在更差。放弃什么的,就真的一点希望都没有了。
说了这么多都偏题了,下面我们直接讨论代码吧。
完成与进阶
原始代码
我当时所编写的代码如下,代码已经过测试,可实现题目要求。现在想想我当时好渣啊,写的代码让现在的我不忍直视。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我点的到底是谁呢</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" onclick="showIndex(this);">有本事点我啊</div>
<div class="node" onclick="showIndex(this);">有本事点我啊</div>
<div class="node" onclick="showIndex(this);">有本事点我啊</div>
<div class="node" onclick="showIndex(this);">有本事点我啊</div>
<div class="node" onclick="showIndex(this);">有本事点我啊</div>
<!-- 写五个意思一下就好啦,话说复制粘贴感觉好爽啊,根本停不下来!! -->
<script>
function showIndex(obj) {
var oDiv = document.getElementsByTagName("div"),
count = oDiv.length;
for (var i = 0; i < count; i++) {
if (oDiv[i] == obj) {
alert(i + 1);
}
}
}
</script>
</body>
</html>
这么做确实完成了题目所叙述的功能,但是这代码看起来并不优美。现在来改进一下这渣渣的js代码,最起码不要让事件注册以onclick
这种方式写在html标签里面,看着好不爽呀!
有一些问题的代码
<!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++) {
oDiv[i].onclick = function() {
alert(i);
}
}
</script>
</body>
</html>
本想就这么蒙混过关,但是聪明的读者在认真看了上面的改进代码后,一定会一顿@我“你妹啊,运行结果果断不对啊!”
确实不对,因为无论点击哪个div
弹出的结果都是5。这是为什么呢?我先不解释,我要卖个关子,我现在要在代码里面加入点匿名自执行函数。
改进后的代码
变量的作用域是js的一个非常重要的概念。相信很多同学理解起来都不是很难,但是也并不是说所有人都懂得的东东。不信,看看下面的代码,解释一下为什么这么做就不会有问题了吧。
<!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>
就算我不说你们也都知道的事情
当改进过代码之后,变量i
的作用域的发生了改变。之前每一次循环中的变量i
都是共享的,但是被包裹起来之后,就彼此独立咯~问题也就解决咯~喜大普奔啊!
使用一下js类库吧
上面的原生js固然可以实现功能,但是不够精简。而且很多时候,我们在工作中都会使用一些js类库,比如:jQuery,Zpeto(移动端使用)什么的。所以在此也贴上jQuery实现该功能的代码。
$('.node').on('click', function(e) {
alert($(this).index());
});
这样一来代码便简洁了很多,对于拥有代码洁癖的我来说,这实在是太舒爽了,哈哈哈!
当有多个相同的DIV时,我怎么判断我点击的是哪个嘞的更多相关文章
- 当有多个相同的DIV时,我怎么判断我点击的是哪个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 图片大于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 ...
随机推荐
- R语言查找变量ls函数
要知道目前在工作区中的可用变量,可以使用 ls()函数列出所有变量. 另外,ls() 函数可以使用模式来匹配变量名称. print(ls()) 当上面的代码执行时,它产生以下结果: [1] " ...
- Redis 【keys】 一句话说明
DEL----------------------------------删除给定的一个或多个key DUMP--------------------------------序列化给定key,并返回被 ...
- Web开发技术选型之Java与PHP
PHP与J2EE的对比 网上有很多关于PHP与J2EE之间的对比,细观无非以下几点: 1.语言特征 PHP为脚本语言,解释型语言,弱类型,专为Web开发打造.Java为C语言系编程语言,编译型,强类型 ...
- OpenGL绘制一个三角形
应该建立一个vertex shader文件和一个pixel shader文件,分别命名为shader.vsh和shader.fsh. shader.vsh: attribute vec3 positi ...
- 一、hbase单机安装
下文将快速构建并启动单节点hbase,不使用hdfs作为存储,不使用独立的zookeeper hbase官网:http://hbase.apache.org/ 一.JDK环境 hbase需要JDK环境 ...
- 配置/etc/profile错误导致很多系统命令无法使用
在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...
- 撩课-Java每天5道面试题第26天
161.简述一下springMVC当中的视图解析器 请求处理方法执行完成后,最终返回一个 ModelAndView 对象 对于那些返回 String,View 或 ModeMap 等类型的处理方法 S ...
- MVC 手机端页面 使用标签file 图片上传到后台处理
最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了:如果对样式没有太大的要求我感觉使用这个就足够了 ...
- CSS(二)选择符
2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元 ...
- Git和Github快速入门
一.什么是Git? 假设你在的公司要上线一个新功能,你们开发团队为实现这个新功能,写了大约5000行代码,上线没2天,就发现这个功能用户并不喜欢,你老板让你去掉这个功能,你怎么办?你说简单,直接把50 ...