通過綁定jQuery中傳遞變量似乎並沒有工作

Question

這裏是我的代碼，做工作：

function mouseOver() 
{ 
    $(".beaver").fadeIn(100); 

} 

function mouseOut() 
{ 
    $(".beaver").fadeOut(100); 
} 

$("#group_beaver").bind('mouseenter', mouseOver).bind('mouseleave', mouseOut); 

但是，爲什麼不工作的呢？

function mouseOver(variable) 
{ 
    $(variable).fadeIn(100); 

} 

function mouseOut(variable) 
{ 
    $(variable).fadeOut(100); 
} 

$("#group_beaver").bind('mouseenter', mouseOver('.beaver')).bind('mouseleave', mouseOut('.beaver')); 

Answer 1

這是正確的;你打電話mouseOver，並期待它返回一個綁定到事件的函數。爲了使它實際上做到這一點，雖然，您可以使用此代碼：

function mouseOver(variable) { 
    return function() { 
     $(variable).fadeIn(100); 
    }; 
} 
function mouseOut(variable) { 
    return function() { 
     $(variable).fadeOut(100); 
    }; 
} 

Answer 2

icktoofay的技術稱爲閉包。關於關閉here有一個令人難以忍受的全面討論。我發現它們對使用window.setTimeout（）安排事件非常有用。他們基本上允許你加載一個帶有先決條件的函數對象，然後用沒有參數的方式來評估它。相當漂亮。

但是他們所有的新奇倒閉通常是可以避免的。例如，如果.beaver的是#group_beaver孩子你會更好的東西去像

function mouseOver() 
{ 
    $(this).children().fadeIn(100); 
} 

在事件處理程序的jQuery可以確保this總是指觸發事件的元素，所以你已經基本上得到了免費的論據。鑑於你的例子簡單，我猜測閉包是沒有必要的。

你也可以這樣做：

$('group_beaver').mouseenter(function() { 
    $(variable).fadeIn(100); 
}); 

這實際上只是一種變相的關閉。它與下面的寫法：

function mouseOver(variable) { 
    return function() { 
     $(variable).fadeIn(100); 
    } 
}; 

$('#group_beaver').mouseenter(mouseOver('.beaver'));