爲什麼$（this）選擇器在我的函數內工作，但從外部工作？

Question

基本上我試圖改變一些JQuery的背景顏色，將class =「cell」的div加入到class =「grid」的父級div中。因此，「細胞」類不是在原來的index.html

因此它可以定義當我寫這樣的代碼：

$(document).ready(function() { 
    var clr = "red"; 
    $('.cell').mouseenter(function() { 
     $(this).css('background-color', clr); 
    }); 
}); 

但它不是我定義的功能等：

$(document).ready(function() { 
    function fillCell(clr){ 
     $(this).css('background-color', clr); 
    } 

    $('.cell').mouseenter(function() { 
     alert(clr);  //added for test 
     fillCell("red"); 
    }); 

}); 

請注意，當懸停並觸發「紅色」時，警報（）會被觸發。

Answer 1

取而代之。

fillCell.call(this, "red"); 

的mouseEnter事件處理程序設置成該事件被觸發的元素上下文（this）。但是，通過將事件處理函數定義提取到事件處理函數的外部，您將丟失this上下文。 .call()可讓您覆蓋該上下文。閱讀更多here。

Answer 2

this只適用於作爲參數傳入的任何函數（匿名函數或您定義的函數）的上下文中。你可以做的只是通過this作爲你的案例中的函數的參數，因爲你需要它來做額外的事情，它會按你想要的方式工作。

$(document).ready(function() { 
    function fillCell(clr, o){ 
     $(o).css('background-color', clr); 
    } 

    $('.cell').mouseenter(function() { 
     alert(clr);  //added for test 
     fillCell("red", this); 
    }); 
});