jquery：“$(this)”到底是什么意思？

IT技术 javascript jquery
2021-02-03 02:56:45

我有一个程序，它运行良好。见这里。

这是代码：

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

更改为“这个”，它将不起作用。

$(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);
    });
});
6个回答

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

在 jQuery 绑定事件函数内部，this指的是正在操作的集合中的当前 DOM 元素。因为它是一个 DOM 元素，所以将它传递给 jQ 就像$( this )使它成为一个 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);
    });
});
请注意，jondavidjohn 和我给出了相同的解决方案，但他选择只存储对thisin的引用，self而我选择存储对 jQuerized thisin的引用jQuerizedElement。在这种情况下，两者都可以。
2021-03-22 02:56:45

$(this)是上下文敏感的。您输入的每个 [anonymous, in this case] 函数的值都会发生$(this)变化。例如：

$('#round').click(function(){
    alert($(this).attr('id')) // alerts round
    setInterval(function(){
        alert($(this).attr('id')) // alerts undefined
    });
});
为了记录，它不是$(this)特别的，但是this。$()只是在 jQuery 对象中包装（或尝试）引用。
2021-04-02 02:56:45
很好的补充。要注意这一点很重要。
2021-04-04 02:56:45

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

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

您可以通过将 'this' 复制到另一个变量 ex 来处理此问题：

var that = this:

并在回调

$(that).animate...
其它你可能感兴趣的问题
上一篇如何模糊div元素？ 下一篇加载模板 dom 时，angular2 模板/钩子中的脚本标记