Javascript jquery：“$(this)”到底是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6749634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: what does "$(this)" exactly mean?
提问by SPG
I have a program and it works well. See HERE.
我有一个程序，它运行良好。请参阅此处。
This is the code:
这是代码：
<div id="round"></div>
<style>
#round{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
left: 400px;
top: 200px;
background-color: #e1e1e1;
}
</style>
<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$("#round").click(function(){
setInterval(function(){
$("#round").animate(
{height: 250,
width: 150,
top:150,
left: 425},
{duration: 300}
).
animate(
{height: 200,
width: 200,
top:200,
left: 400},
{duration: 300}
);
}, 0);
});
});
</script>
But when I change "#round" to "this". It won't work. why? (actually it works, but when I put them into setInterval(), it won't work)
但是当我将“#round”更改为“this”时。它不会工作。为什么？（实际上它有效，但是当我将它们放入 setInterval() 时，它不起作用）
$(document).ready(function(){
$("#round").click(function(){
setInterval(function(){
$("#round").animate(
{height: 250,
width: 150,
top:150,
left: 425},
{duration: 300}
).
animate(
{height: 200,
width: 200,
top:200,
left: 400},
{duration: 300}
);
}, 0);
});
});
change to "this", it won't work.
更改为“这个”，它将不起作用。
$(document).ready(function(){
$("#round").click(function(){
setInterval(function(){
$(this).animate(
{height: 250,
width: 150,
top:150,
left: 425},
{duration: 300}
).
animate(
{height: 200,
width: 200,
top:200,
left: 400},
{duration: 300}
);
}, 0);
});
});
回答by jondavidjohn
thisis a reference to the member that invokes the current function...
this是对调用当前函数的成员的引用...
then you can wrap it in the jquery function $()to select it just like you would another selector.
然后您可以将它包装在 jquery 函数中$()以像选择另一个选择器一样选择它。
So setIntervalcalls a anonymous function so it is not invoked by a referencable member, so it defaults to the windowobject.
所以setInterval调用匿名函数，所以它不会被可引用成员调用，所以它默认为window对象。
save the thiscontext in a variable and then use it internally like this...
将this上下文保存在一个变量中，然后像这样在内部使用它......
$(document).ready(function(){
$("#round").click(function(){
var clicked = this; //<----store the click context outside setInterval
setInterval(function(){
$(clicked).animate( //<----------use it here
{height: 250,
width: 150,
top:150,
left: 425},
{duration: 300}
).
animate(
{height: 200,
width: 200,
top:200,
left: 400},
{duration: 300}
);
}, 0);
});
});
回答by JAAulde
Inside of a jQuery bound event function, thisrefers to the current DOM element from the collection which is being operated on. Since it is a DOM element, passing it to jQ like $( this )makes it a jQuery collection so that you can do more jQuery stuff to it.
在 jQuery 绑定事件函数内部，this指的是正在操作的集合中的当前 DOM 元素。因为它是一个 DOM 元素，所以将它传递给 jQ 就像$( this )使它成为一个 jQuery 集合，这样你就可以对它做更多的 jQuery 东西。
In your modified, non-workng code, however, you moved that into a new anonymous function. Inside of thatfunction, thisnow refers to the new scope.
但是，在您修改后的非工作代码中，您将其移动到了一个新的匿名函数中。在该函数内部，this现在指的是新的作用域。
You need to get a reference to thisbefore your function:
你需要this在你的函数之前得到一个引用：
$(document).ready(function(){
$("#round").click(function(){
var jQuerizedElement = $( this );
setInterval(function(){
jQuerizedElement.animate(
{height: 250,
width: 150,
top:150,
left: 425},
{duration: 300}
).
animate(
{height: 200,
width: 200,
top:200,
left: 400},
{duration: 300}
);
}, 0);
});
});
回答by wanovak
$(this)is context sensitive. Each [anonymous, in this case] function you're entering, the value of $(this)changes. For example:
$(this)是上下文敏感的。您输入的每个 [anonymous, in this case] 函数的值都会发生$(this)变化。例如：
$('#round').click(function(){
alert($(this).attr('id')) // alerts round
setInterval(function(){
alert($(this).attr('id')) // alerts undefined
});
});
回答by ChristopheCVB
Because you are using a callback function that is fired by setInterval on a different context...
因为您正在使用由 setInterval 在不同上下文中触发的回调函数...
You can handle this by copying 'this' to an other variable ex :
您可以通过将 'this' 复制到另一个变量 ex 来处理此问题：
var that = this:
And on callback
并在回调
$(that).animate...
回答by ShankarSangoli
this is basically context related. When you say $(this) if this is a dom element it will give you jquery object associated with this dom element.
这基本上是上下文相关的。当你说 $(this) 如果这是一个 dom 元素时，它会给你与这个 dom 元素关联的 jquery 对象。
回答by Doctor
If I understand well it seems that $(this)is just the nodethat was triggerd.
如果我理解得很好，它似乎$(this)只是被触发的节点。
For instance when you have a click eventon a button. In the callback of the event you can use $(this) that represent the node of the button...
例如，当您在按钮上有一个点击事件时。在事件的回调中，您可以使用表示按钮节点的 $(this) ...
