Question

找出jQuery当前等于$(this)的最佳方法是什么？

例如alert(this);没有多大帮助。

我问的原因是，在将代码移动到函数中之后，一段代码当前没有做它应该做的事情。

下面的摘录现在是一个函数，$（this）现在似乎引用了DOMWindow。

if($(this).hasClass('open'))
  {
    alert('I should be closed');
    $(this).removeClass('open').addClass('closed');
    $(this).parents('article').css('border', '1px solid red').animate({'width': '212px'}, 100, "linear", function() {
    run_masonry();
    });
  }
  else
  {
    alert('I should be open');
    $(this).removeClass('closed').addClass('open');
    $(this).parents('article').css('border', '1px solid blue').animate({'width': '646px'}, 100, "linear", function() {
    run_masonry();
  });
}

如何将其保留为$（this）作为原始点击元素？

Answer 1

找出jQuery当前等于$(this)的最佳方法是什么？

将其记录到您最喜爱的javascript调试工具的控制台（例如FireBug或Chrome开发者工具栏）：

console.log($(this));

将返回一个jQuery包装的对象。如果您想了解有关可以使用的本机对象的更多信息：

console.log(this);

如果你正在进行javascript开发，你应该使用javascript调试工具。 alert不是这样的工具。

现在您已使用某些代码源更新了问题，似乎您在全局范围内使用$(this)。然后它将引用window对象。如果你想要它引用一些点击的元素或其他东西，你将不得不首先订阅.click事件：

$('.someSelector').click(function() {
    // here $(this) will refer to the original element that was clicked.
});

或者如果您想在单独的函数中外化此代码：

function foo() {
    // here $(this) will refer to the original element that was clicked.
}

$('.someSelector').click(foo);

或：

function foo(element) {
    // here $(element) will refer to the original element that was clicked.
}

$('.someSelector').click(function() {
    foo(this);
});

Answer 2

将代码移动到函数中通常会改变代码的范围。所以“this”将不再引用原始对象而是引用新对象（或全局“窗口”对象）。如果您向我们展示您的代码，我们将能够确定问题。

Answer 3

我怀疑你做的是这样的事情：

$('#element').click(function() {
    clickHandler();
});

在这种情况下，将在Window对象上下文中调用clickHandler。要保留正确的上下文，只需将代码更改为：

$('#element').click(clickHandler);

Answer 4

如果你想查看传递的是什么，你可以使用我的版本或prinzhorn版本的jquerylog。它应该帮助您逐步确定正在发生的事情：

http://www.jquerylog.com / https://github.com/fmsf/jQueryLog

对于像这样的电话：

$("#foo").parents(".t1").next().prev().parent().find(".t2:last .t4:last").text("test");

你会得到这样的输出（它在每一步中识别div：

$('#foo'): [<div id="foo" class="t3"></div>]
    parents('.t1'): [ <div class="t1">…</div> ]
        next(undefined): [ <div class="t1">…</div> ]
            prev(undefined): [ <div class="t1">…</div> ]
                parent(undefined): [ <body>…</body> ]
                    find('.t2:last .t4:last'): [<div class="t4">teste</div>]

在jQuery中识别$（this）

4 个答案: