在 jQuery 中识别 $(this)

发布于 2024-12-25 00:01:48 字数 763 浏览 3 评论 0原文

找出当前 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) 保留为原始单击的元素？

原文

Whats the best way to find out what $(this) currently equals in jQuery?

For example alert(this); isn't much help.

The reason I ask is that a piece of code is not currently doing what it should do after I have moved the code into a function.

The excerpt below is now in a function, and $(this) now seems to refer to the 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();
  });
}

How do I keep it as $(this) being the original clicked element?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南…巷孤猫 2025-01-01 00:01:48

找出当前 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);
});

Whats the best way to find out what $(this) currently equals in jQuery?

By logging it to the console of your favorite javascript debugging tool (like FireBug or Chrome developer toolbar for example):

console.log($(this));

which will return a jQuery wrapped object. If you want to know more about the native object you could use:

console.log(this);

If you are doing javascript development you should use a javascript debugging tool. alert is not such tool.

Now that you have updated your question with some code source it seems that you are using $(this) in the global scope. Then it will refer to the window object. If you want it to refer to some clicked element or something you will have to first subscribe to the .click event:

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

or if you wanted to externalize this code in a separate function:

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

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

or:

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

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

回复收藏 0 原文

〃温暖了心ぐ 2025-01-01 00:01:48

将代码移动到函数中时，代码的范围通常会发生变化。因此，“this”将不再引用原始对象，而是引用一个新对象（或全局“窗口”对象）。如果您向我们展示您的代码，我们将能够识别问题。

回复收藏 0 原文

時窥 2025-01-01 00:01:48

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

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

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

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

I suspect that you do something like this:

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

In this case clickHandler will be called in Window object context. To preserve correct context just change your code to:

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

回复收藏 0 原文

对岸观火 2025-01-01 00:01:48

如果你想检查正在传递的内容，你可以使用我的版本或 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>]

If you want to check what's being passed around you can use either my version or prinzhorn's version of jquerylog. It should help you identify step by step what's happening:

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

For a call like:

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

You'll get an output like this (which identifies the div in each step:

$('#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>]

回复收藏 0 原文

~没有更多了~