jquery：什么是“$（this）”确切意思？ [英] jquery: what does "$(this)" exactly mean?

问题描述

我有一个程序，它运作良好。
请参见这里。

I have a program and it works well. See HERE.

这是代码：

<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>

但是当我将#round改为this时。它不会起作用。为什么？
（实际上它可以工作，但是当我把它们放入setInterval（）时，它将无法工作）

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)

$(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);
    });
});

更改为this，它将无效。

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);
    });
});

推荐答案

此是对调用当前函数的成员的引用...

this is a reference to the member that invokes the current function...

然后你可以将它包装在jquery函数中 $（） 选择它就像你另一个选择器一样。

then you can wrap it in the jquery function $() to select it just like you would another selector.

所以 setInterval 调用匿名函数，因此它不会被引用成员调用，因此它默认为窗口对象。

So setInterval calls a anonymous function so it is not invoked by a referencable member, so it defaults to the window object.

保存<在一个变量中code>这个上下文然后在内部使用它... ...

save the this context in a variable and then use it internally like 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);
    });
});

这篇关于jquery：什么是“$（this）”确切意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！