微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
javascript - 当有多个相同的DIV时，我怎么判断我点击的是哪个嘞
怪我咯
怪我咯 2017-04-10 15:42:52
[JavaScript讨论组]
0 2 580
举报

序言

这是我曾经面试的时候遇到过的一道面试题。非常基础，而且出现频率奇高，所以就留心总结一下。原题目如下：

1到100个节点，点击其中任意一个节点，弹出节点所在的序号。

问题就是如此之简单直接，但我对这扑面而来的题目似乎还没有能力完全做好准备。回想起当时的能力真是渣到醉的不行。不过“二哈”的我把这点当做一个需要我努力的理由。

既然已经很差了，学一点也不会比现在更差。放弃什么的，就真的一点希望都没有了。

说了这么多都偏题了，下面我们直接讨论代码吧。

完成与进阶

原始代码

我当时所编写的代码如下，代码已经过测试，可实现题目要求。现在想想我当时好渣啊，写的代码让现在的我不忍直视。




    
    我点的到底是谁呢
    


    
有本事点我啊

    
有本事点我啊

    
有本事点我啊

    
有本事点我啊

    
有本事点我啊

这么做确实完成了题目所叙述的功能，但是这代码看起来并不优美。现在来改进一下这渣渣的js代码，最起码不要让事件注册以onclick这种方式写在html标签里面，看着好不爽呀！

有一些问题的代码




    
    判断点击的是哪个p
    


    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

本想就这么蒙混过关，但是聪明的读者在认真看了上面的改进代码后，一定会一顿@我“你妹啊，运行结果果断不对啊！”

确实不对，因为无论点击哪个p弹出的结果都是5。这是为什么呢？我先不解释，我要卖个关子，我现在要在代码里面加入点匿名自执行函数。

改进后的代码

变量的作用域是js的一个非常重要的概念。相信很多同学理解起来都不是很难，但是也并不是说所有人都懂得的东东。不信，看看下面的代码，解释一下为什么这么做就不会有问题了吧。




    
    判断点击的是哪个p
    


    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

    
有本事你点我啊

就算我不说你们也都知道的事情

当改进过代码之后，变量i的作用域的发生了改变。之前每一次循环中的变量i都是共享的，但是被包裹起来之后，就彼此独立咯~问题也就解决咯~喜大普奔啊！

使用一下js类库吧

上面的原生js固然可以实现功能，但是不够精简。而且很多时候，我们在工作中都会使用一些js类库，比如：jQuery，Zpeto（移动端使用）什么的。所以在此也贴上jQuery实现该功能的代码。

$('.node').on('click', function(e) {
    alert($(this).index());
});

这样一来代码便简洁了很多，对于拥有代码洁癖的我来说，这实在是太舒爽了，哈哈哈！

怪我咯
怪我咯

走同样的路，发现不同的人生

全部回复(2)
迷茫
迷茫2017-04-10 15:44:52 2楼

你是这个意思么？

序言

这是我曾经面试的时候遇到过的一道面试题。非常基础，而且出现频率奇高，所以就留心总结一下。原题目如下：

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>
    <p class="node" onclick="showIndex(this);">有本事点我啊</p>
    <p class="node" onclick="showIndex(this);">有本事点我啊</p>
    <p class="node" onclick="showIndex(this);">有本事点我啊</p>
    <p class="node" onclick="showIndex(this);">有本事点我啊</p>
    <p class="node" onclick="showIndex(this);">有本事点我啊</p>
    <!-- 写五个意思一下就好啦，话说复制粘贴感觉好爽啊，根本停不下来！！ -->
    <script>
    function showIndex(obj) {
        var op = document.getElementsByTagName("p"),
            count = op.length;
        for (var i = 0; i < count; i++) {
            if (op[i] == obj) {
                alert(i + 1);
            }
        }
    }
    </script>
</body>
</html>

这么做确实完成了题目所叙述的功能，但是这代码看起来并不优美。现在来改进一下这渣渣的js代码，最起码不要让事件注册以onclick这种方式写在html标签里面，看着好不爽呀！

有一些问题的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断点击的是哪个p</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>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <script>
    var op = document.getElementsByClassName("node");
    for (var i = 0; i < op.length; i++) {
        op[i].onclick = function() {
            alert(i);
        }
    }
    </script>
</body>
</html>

本想就这么蒙混过关，但是聪明的读者在认真看了上面的改进代码后，一定会一顿@我“你妹啊，运行结果果断不对啊！”

确实不对，因为无论点击哪个p弹出的结果都是5。这是为什么呢？我先不解释，我要卖个关子，我现在要在代码里面加入点匿名自执行函数。

改进后的代码

变量的作用域是js的一个非常重要的概念。相信很多同学理解起来都不是很难，但是也并不是说所有人都懂得的东东。不信，看看下面的代码，解释一下为什么这么做就不会有问题了吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断点击的是哪个p</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>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <p class="node">有本事你点我啊</p>
    <script>
    var op = document.getElementsByClassName("node");
    for (var i = 0; i < op.length; i++) {
        (function(i) {
            op[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());
});

这样一来代码便简洁了很多，对于拥有代码洁癖的我来说，这实在是太舒爽了，哈哈哈！

赞 +0
添加回复
巴扎黑
巴扎黑2017-04-10 15:44:52 1楼

这不是问题啊

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部