您的位置:首页> 日志> 前端技术 正文
DTOP

怎么解决$(this)失效问题

chenke | 2017年09月30日 |

>>收藏本文 已有 0条评论

先看一个列子,下面的例子是计划点击botton元素  div元素消失
  1. < div   id = "panel"   style = "display:none;" >  
  2.     <button class="close">消失</button> 
  3. </ div >  
  4. < script >  
  5. $("#panel").fadeIn(function () { 
  6.   $('.close').click(function () { 
  7.     $(this).fadeOut();  
  8.   }); 
  9. }); 
  10.  
  11. </ script >  

但执行后button没有了,div元素还在,这是什么原因呢,因为,$(this) 并不是我们想象的那个this

那么我们可以这样写:

  1. $( "#panel" ).fadeIn( function (){ 
  2.     $('.close').click($.proxy(HidePanel, this)); 
  3. }); 
  4. function  HidePanel() { 
  5.     $(this).fadeOut(); 

也可以这样写:

  1. $( "#panel" ).fadeIn( function (){  
  2.     $('.close').click($.proxy(function (){  
  3.     $(this).fadeOut();  
  4. },this)); 
  5. });  

这里用到了$.proxy() 方法,$.proxy 方法接受一个已有的函数,并返回一个带特定上下文的新的函数。该方法通常用于向上下文指向不同对象的元素添加事件。

语法:

$( selector ).proxy( function,context )

$( selector ).proxy( context,name )

参数 描述
function 要被调用的已有的函数。
context 函数所在的对象的名称。
name 已有的函数,其上下文将被改变(应该是 context 对象的属性)。