在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(); 
    }); 
}