Question

我有一个程序，它运作良好。请参阅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（）时，它将不起作用）

$(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”，它将无效。

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

Answer 1

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

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

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

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

Answer 2

在jQuery绑定事件函数内部，this引用正在操作的集合中的当前DOM元素。因为它是一个DOM元素，所以将它传递给像$( this )这样的jQ使它成为一个jQuery集合，这样你就可以为它做更多的jQuery。

但是，在修改后的非工作代码中，您将其移动到新的匿名函数中。在函数内部，this现在引用新范围。

您需要在功能之前获得对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);
    });
});

Answer 3

$(this)对上下文敏感。您输入的每个[匿名，在这种情况下]功能，$(this)的值都会发生变化。例如：

$('#round').click(function(){
    alert($(this).attr('id')) // alerts round
    setInterval(function(){
        alert($(this).attr('id')) // alerts undefined
    });
});

Answer 4

因为您正在使用由setInterval在不同的上下文中触发的回调函数...

您可以通过将'this'复制到另一个变量ex：

来处理此问题

var that = this:

回调

$(that).animate...

Answer 5

这基本上与上下文有关。当你说$（this）如果这是一个dom元素时，它将为你提供与这个dom元素相关联的jquery对象。

Answer 6

如果我理解的话，$(this)似乎只是触发的节点。

例如，当您在按钮上点击事件时。在事件的回调中，您可以使用$（this）代表按钮的节点 ...

jquery：“$（this）”究竟是什么意思？

6 个答案: