链接: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. 关于svn插件突然失效问题

    这个分享一下 安装  MyBatisGenerator 插件 之后,svn失效,删掉mybatis 后,svn就恢复正常...这怎么割 一翻折腾无效,后来发现  MyBatisGenerator  和 ...

  2. 常用的几种OCR方法/组件小结(C#)

    数字.英文识别比较容易.中文识别主要存在两个问题:其一,有可能误识别.其二.需要随带几十兆的识别库(甚至更大).   适合C#编程引用的中文ocr技术,查到以下两种:   1.使用开源的Tessera ...

  3. [CPP] Object Based Class

    前言 几年前接触到一款很好玩的RPG游戏,叫作CPP.最近想着怀念一下,又不想干巴巴地去玩.于是乎,我打算写几篇攻略,主要是记录一下游戏中一些奇妙的点.游戏的第一章是面向对象程序设计,其中又分为基于对 ...

  4. MySQL中使用SHOW PROFILE命令分析性能的用法整理(配合explain效果更好,可以作为优化周期性检查)

    这篇文章主要介绍了MySQL中使用show profile命令分析性能的用法整理,show profiles是数据库性能优化的常用命令,需要的朋友可以参考下   show profile是由Jerem ...

  5. 关于键盘KeyDown事件

    if (e.KeyValue==13) //如果键盘的值等于13 这里面的13是enter键 textBox2.Focus(); //焦点就跑到textbox2上面

  6. odata.EF一些常用配置

    Enable-Migrations //在数据库里建一个表 Add-Migration //添加 Update-Database //更新数据 install-package entityframew ...

  7. 基于Spark GraphX计算二度关系

    关系计算问题描述 二度关系是指用户与用户通过关注者为桥梁发现到的关注者之间的关系.目前微博通过二度关系实现了潜在用户的推荐.用户的一度关系包含了关注.好友两种类型,二度关系则得到关注的关注.关注的好友 ...

  8. js中windows的函数(随机数,计时器的实现)

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

  9. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

  10. Python 关于bytes类方法对数字转换的误区, Json的重要性

    本文起源于一次犯错, 在发觉bytes()里面可以填数字, 转出来的也是bytes类型, 就心急把里面的东西decode出来. 结果为空.搞来搞去以为是命令不熟练事实上错在逻辑. a1 = bytes ...