连接：https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral
序言
这是我曾经面试的时候遇到过的一道面试题。很是基础，并且出现频率奇高，因此就留心总结一下。原题目以下：javascript
1到100个节点，点击其中任意一个节点，弹出节点所在的序号。css
问题就是如此之简单直接，但我对这扑面而来的题目彷佛尚未能力彻底作好准备。回想起当时的能力真是渣到醉的不行。不过“二哈”的我把这点当作一个须要我努力的理由。html
既然已经不好了，学一点也不会比如今更差。放弃什么的，就真的一点但愿都没有了。java
说了这么多都偏题了，下面咱们直接讨论代码吧。node
完成与进阶
原始代码
我当时所编写的代码以下，代码已通过测试，可实现题目要求。如今想一想我当时好渣啊，写的代码让如今的我不忍直视。面试
<!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标签里面，看着好不爽呀！segmentfault
有一些问题的代码
<!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的一个很是重要的概念。相信不少同窗理解起来都不是很难，可是也并非说全部人都懂得的东东。不信，看看下面的代码，解释一下为何这么作就不会有问题了吧。ui
<!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()); });
这样一来代码便简洁了不少，对于拥有代码洁癖的我来讲，这实在是太舒爽了，哈哈哈！