在jquery中確定$（this）

我遇到的一個常見問題是越來越困惑$（this）指的是什麼。

我經常會盡量給它一些奇怪的風格：

$(this).css("border","10px solid red")

有時幫助。

然而，我被困在下面。我的問題可以用兩種方法解答：

1）是否有一種通用的方法來「查看」在任何給定情況下$（this）指的是什麼？也許與螢火蟲結合？ 2）更具體地說，任何想法$（this）在下面的示例中應該指的是什麼？我以爲這會是一類btnSave的輸入，但似乎並不爲：

$(ajaxContainer).find("input.btnSave").click(function(){ 
    savePanel(); 
}); 

function savePanel() { 
    $(this).css("border","10px solid red"); 
};

來源

2009-10-27 DA.

1）使用控制檯在Firebug：

var obj = $(this); 
console.log(obj);

2）savePanel（）榮獲」沒有正確使用$（this）的上下文。你可以嘗試：

$(ajaxContainer).find("input.btnSave").click(function(){ 
    $(this).css("border", "10px solid red"); 
});

來源

2009-10-27 22:29:44 richsage

謝謝！兩個答案的價格之一。我很感激。 – 2009-10-27 22:34:32

快速編輯：我認爲應該是console.log，對不對？（這似乎工作）。 – 2009-10-27 22:42:47

@DA對不起，我總是讓他們感到困惑！我現在編輯帖子:-) – richsage 2009-10-27 22:51:36

第一個問題（使用Firebug）：

放置一個斷點在某個地方，你要調查（例如內部savePanel()在你的例子）的情況下。
當您的應用程序遇到斷點時，將$(this)添加到監視面板並將其展開以查看其屬性。
第一個屬性應該是"0"，它對應於jQuery對象匹配的第一個DOM節點（在本例中爲this）。
如果將鼠標懸停在"0"的值上，Firebug將突出顯示頁面上的DOM節點。如果您單擊該值，Firebug將切換到HTML選項卡並滾動到該元素。

第二個問題：

內，您的匿名函數，this將參照<input />元素。
savePanel()內部，this將參考window對象。

如果您希望savePanel()有權訪問<input />元素，可以採用多種方法來完成此操作。你的情況，最簡單的是從匿名函數中傳遞：

$(ajaxContainer).find("input.btnSave").click(function(){ 
    savePanel($(this)); 
}); 

function savePanel(inputElement) { 
    inputElement.css("border","10px solid red"); 
}

來源

2009-10-27 22:30:24 Annabelle

啊！那麼，這可能會導致一個單獨的問題......如何將一個函數附加到元素單擊事件，以便在單擊時它會將自身的引用傳遞給它所調用的函數？（也許這應該是一個新的問題呢？） – 2009-10-27 22:33:46

你應該能夠傳遞事件並訪問點擊的目標。就像這裏解釋的：[jquery.com上的event.target]（http://docs.jquery.com/Events/jQuery.Event#event.target） – spig 2009-10-27 22:38:48

謝謝，spig。是的，我甚至在問之前應該嘗試過。在另一條評論中回答我自己的後續問題評論... savePanel（$（this））; – 2009-10-27 22:41:49

在您的代碼示例，你碰上一個經典的JavaScript問題與這個丟失的情況下，因爲從匿名調用另一個功能函數將失去匿名函數的上下文（read more about it here）。當像你這樣調用savePanel時，這個將引用窗口對象。你可以保持這的背景下，從事件處理程序，通過委派方法時使用call or apply：

$(ajaxContainer).find("input.btnSave").click(function(){ 
    savePanel.call(this); 
}); 

// OR 

$(ajaxContainer).find("input.btnSave").click(function(){ 
    savePanel.apply(this, arguments); 
}); 

function savePanel() { 
    $(this).css("border","10px solid red"); 
};

來源

2009-10-27 22:34:31 PatrikAkerstrand

「本」是JavaScript的往往是混亂的根源，因爲它在語法上看起來像一個變量，因此暗示了傳遞它的想法。實際上，「this」更像是一個函數，並且總是返回當前執行上下文，也就是當前函數被調用或應用到的上下文。

如果我沒有記錯的話，jQuery的嘗試在上下文回調粘合劑被稱爲執行的回調，這是

object1.object2.object3.bindSomeCallback(function() { 
     object3 will be "this" in the callback 
})

來源

2009-10-27 22:39:14 user187291

在jquery中確定$（this）

回答

相關問題