5

我遇到的一个常见问题是对 $(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");
};
4

4 回答 4

9

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-27T22:29:44.627 回答
4

第一个问题（使用 Firebug）：

  1. 在您要调查的上下文中的某处放置一个断点（例如，savePanel()在您的示例中）。
  2. 当您的应用程序遇到断点时，添加$(this)到监视面板并展开它以查看其属性。
  3. 第一个属性应该是"0"，它对应于 jQuery 对象匹配的第一个 DOM 节点（在本例中为this）。
  4. 如果您将鼠标悬停在 的值上"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-27T22:30:24.257 回答
1

在您的代码示例中，您遇到了一个经典的 JavaScript 问题，其中丢失了this的上下文，因为从匿名函数调用另一个函数将丢失匿名函数的上下文（在此处阅读有关它的更多信息）。当 savePanel 像你一样被调用时，这将引用窗口对象。您可以在委派方法时使用call 或 apply从事件处理程序中保留this的上下文：

$(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-27T22:34:31.323 回答
0

“this”是 javascript 的一个经常混淆的来源，因为它在语法上看起来像一个变量，因此暗示了传递它的想法。实际上，“this”更像是一个函数，总是返回当前执行上下文，即当前函数被调用或应用到的上下文。

如果我没记错的话，jquery 会尝试在调用回调绑定器的上下文中执行回调，即

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })
于 2009-10-27T22:39:14.707 回答