JQ绑定事件的叠加和解决，index()方法的坑

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()方法。

　总结

　　　　以上就是我在做项目过程中发现的问题，与大家一起分享。如果哪里写的不好可以指出，会加以改进。本人是一名菜鸟，与君共勉。

转载于:https://www.cnblogs.com/cleaverlove/p/6283163.html