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

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

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

  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. R语言查找变量ls函数

    要知道目前在工作区中的可用变量,可以使用 ls()函数列出所有变量. 另外,ls() 函数可以使用模式来匹配变量名称. print(ls()) 当上面的代码执行时,它产生以下结果: [1] " ...

  2. Redis 【keys】 一句话说明

    DEL----------------------------------删除给定的一个或多个key DUMP--------------------------------序列化给定key,并返回被 ...

  3. Web开发技术选型之Java与PHP

    PHP与J2EE的对比 网上有很多关于PHP与J2EE之间的对比,细观无非以下几点: 1.语言特征 PHP为脚本语言,解释型语言,弱类型,专为Web开发打造.Java为C语言系编程语言,编译型,强类型 ...

  4. OpenGL绘制一个三角形

    应该建立一个vertex shader文件和一个pixel shader文件,分别命名为shader.vsh和shader.fsh. shader.vsh: attribute vec3 positi ...

  5. 一、hbase单机安装

    下文将快速构建并启动单节点hbase,不使用hdfs作为存储,不使用独立的zookeeper hbase官网:http://hbase.apache.org/ 一.JDK环境 hbase需要JDK环境 ...

  6. 配置/etc/profile错误导致很多系统命令无法使用

    在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...

  7. 撩课-Java每天5道面试题第26天

    161.简述一下springMVC当中的视图解析器 请求处理方法执行完成后,最终返回一个 ModelAndView 对象 对于那些返回 String,View 或 ModeMap 等类型的处理方法 S ...

  8. MVC 手机端页面 使用标签file 图片上传到后台处理

    最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了:如果对样式没有太大的要求我感觉使用这个就足够了 ...

  9. CSS(二)选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  10. Git和Github快速入门

    一.什么是Git? 假设你在的公司要上线一个新功能,你们开发团队为实现这个新功能,写了大约5000行代码,上线没2天,就发现这个功能用户并不喜欢,你老板让你去掉这个功能,你怎么办?你说简单,直接把50 ...