在jQuery事件中引用javascript对象

Question

我已经有了这段代码。

var NotificationsBox={ 
    HideNotificationBox:function() 
    { 
      document.getElementById("NotificationBox").style.visibility="hidden"; 
    }, 
    toggleNotificationBox:function() 
    { 
     $('#NotificationBox').toggle();    
    }, 
    SetContainerClick_NotificationHide_Event:function() 
    { 
     $('#Container').click(this.HideNotificationBox);   
    }, 
    SetNotificationBoxClick_NotificationToggleEvent:function() 
    { 
     $('#ShowNotification').click(function(){ 
      $(this).html("0"); 
      $(this).css("background-color","#000"); 

      this.toggleNotificationBox();  /// <-- PROBLEM 
     }); 
    } 

}; 

NotifyBox=Object.create(NotificationsBox); 
NotifyBox.HideNotificationBox(); 
NotifyBox.SetContainerClick_NotificationHide_Event(); 
NotifyBox.SetNotificationBoxClick_NotificationToggleEvent(); 

现在您可以看到问题所在。这里this将参考#ShowNotification，我想在这里引用NotificationBox，以便我可以调用该函数。

Answer 1

结合click之前保存到this参考，并click事件处理程序中使用此引用，而不是this：

SetNotificationBoxClick_NotificationToggleEvent:function() 
{ 
    var self = this; 
    $('#ShowNotification').click(function(){ 
     $(this).html("0"); 
     $(this).css("background-color","#000"); 

     self.toggleNotificationBox(); // <-- self will refer to NotificationsBox 
    }); 
} 

或者，作为替代，使用NotificationsBox.toggleNotificationBox()，虽然这将停止，如果你的工作恰巧改变变量的名称NotificationsBox：

SetNotificationBoxClick_NotificationToggleEvent:function() 
{ 
    $('#ShowNotification').click(function(){ 
     $(this).html("0"); 
     $(this).css("background-color","#000"); 

     NotificationsBox.toggleNotificationBox(); 
    }); 
}