zoukankan      html  css  js  c++  java
  • 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()方法。

     总结

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

  • 相关阅读:
    Azure PowerShell (7) 使用CSV文件批量设置Virtual Machine Endpoint
    Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台
    Azure China (7) 使用WebMetrix将Web Site发布至Azure China
    Microsoft Azure News(4) Azure新D系列虚拟机上线
    Windows Azure Cloud Service (38) 微软IaaS与PaaS比较
    Windows Azure Cloud Service (37) 浅谈Cloud Service
    Azure PowerShell (6) 设置单个Virtual Machine Endpoint
    Azure PowerShell (5) 使用Azure PowerShell创建简单的Azure虚拟机和Linux虚拟机
    功能代码(1)---通过Jquery来处理复选框
    案例1.用Ajax实现用户名的校验
  • 原文地址:https://www.cnblogs.com/cleaverlove/p/6283163.html
Copyright © 2011-2022 走看看