JQ绑定事件的叠加和解决，index()方法的坑
前言
在做过几个不大不小的项目后，发现技术这种东西，必须要多多实践，才能发现各种问题，理论的知识掌握的再好终究是纸上谈兵。
因此目前感觉有两点是必须要坚持的：①需要不断的学习，加大知识面的广度，才不至于碰到问题连是什么都不知道。
② 需要有知识的沉淀，加强知识面的深度，提高解决问题的能力。俗话说：好记性不如烂笔头，那么记录下遇到的问题是必不可少的。
绑定事件的叠加
在jQuery学习的过程中，更多是学习如何绑定，光记着有几种绑定事件的方式了。而且在做项目过程中，主要也是绑定事件，很少有取消绑定事件。这就导致了我在一个项目中，出现了问题。我印象非常深刻，因为我足足花了一个晚上加第二天早上才发现问题。然后解决（毕竟新手，经验不足）
需求是这样的： 当浏览器窗口宽度小于1000时，点击一个按钮，导航栏高度渐渐变大，显示出来，再次点击，导航栏高度渐渐减小，隐藏起来。（默认是隐藏的）
然后我是给window绑定resize事件，在resize()方法里面给按钮绑定点击事件,绑定事件的部分代码如下：
1 if ($(window).width < 1000) { 2 $('.dropdown-toggle').click(function() { 3 if (flag == false) { 4 $('.dropdown-menu').slideDown(); 5 $('.space').animate({height: '59px'}); 6 flag = true;
console.log(flag); 7 } else { 8 $('.dropdown-menu').slideUp(); 9 $('.space').animate({height: '0px'}); 10 flag = false;
console.log(flag); 11 } 12 }); 13 }
这样就导致当每次调整浏览器窗口且宽度小于1000，就绑定事件。这样导致的问题是点击一次按钮，你绑定了几次事件，就把处理程序执行几遍。我出现了诸如调整窗口奇数次，没有问题，但是调整窗口偶数次就导致导航栏快速上下，或者干脆不下来，还有重复多次上下上下。再多说一句，第一次调整窗口在第6行下输出flag值为true（默认flag值为false）.再调整一次窗口清空控制台在控制台就变false,true.以此类推。。。
来个题外话： 《JavaScript高级程序设计(第3版)》中13.4.1这么说resize事件:
关于何时会触发resize事件，不同浏览器有不同的机制。IE, Safari, Chrome和 Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反应明显变慢。
我的处理方法是①在resize处理程序的入口解除绑定的事件，将以上代码封住到toggleNav函数中
1 $('.dropdown-toggle').unbind('click', toggleNav);
每次开始就解除绑定事件，保证只有下面的一个绑定事件。
②修改代码如下:
if ($(window).width() < 1000) { $('.dropdown-toggle').bind('click', toggleNav); }
这样就解决了绑定事件的叠加问题。但是这样也就有了 《JavaScript高级程序设计(第3版)》书中说的问题， 效率好像并不高，这个不是本篇文章的重点，在以后我会改进。在查阅资料的过程中有参考这篇博文。
index()方法
在制作“鼠标悬停遮罩层头像征名投票特效”项目时，发现了这个问题。
整体的静态效果如图：
每一个征名区的HTML代码如下：
1 <!-- 征名1 --> 2 <div class="area"> 3 <!-- 遮罩层 --> 4 <div class="mask"> 5 <span>征名释义:征名1</span> 6 </div> 7 <div class="Name"> 8 <span>征名1</span> 9 </div> 10 <!-- 投票区 --> 11 <div class="voteArea"> 12 <span class="num">1003票</span> 13 <div class="btn"> 14 投票 15 </div> 16 </div> 17 </div>
需求是： 点击投票按钮，相应去的票数加1.
获取相应的票数值，我是这么写的：
var num = parseInt($('.num').eq($(this).index()).html());
结果管点哪个按钮，都只对“征名2”的票数进行加1($(this).index()一直输出1。一查手册发现:
如果不给index()方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
一看DOM结构，果然类名为"voteArea"DIV下面只有一个span元素和一个div元素(HTML结构如上)。".btn"相对于其同辈元素位置确实是1。
问题找到了，就好办了。获取".btn"的上一个紧邻的同辈元素我们可以使用prev()方法。
总结
以上就是我在做项目过程中发现的问题，与大家一起分享。如果哪里写的不好可以指出，会加以改进。本人是一名菜鸟，与君共勉。