JQuery的animate()方法中使用$(this)的指向问题？

最新推荐文章于 2023-12-18 10:35:42 发布

原创最新推荐文章于 2023-12-18 10:35:42 发布 · 738 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#animate #this指向 #jQuery

jQuery笔记专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在jQuery的animate()方法中使用$(this)时出现的指向问题。问题集中在height值变为两倍及打印结果为46px的疑惑。原因在于animate()的参数对象中并未包含this，因此$(this)实际上是指向调用animate的元素，即<button>标签，其默认高度为23px。解决方案是将$(this)替换为$("div")以正确指定目标元素。

以下是问题html和js:

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

<script src="jQuery v3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    console.log($("div").css("height"));// 点击第一次打印100px 之后点击都打印 46px;
    $("div").animate({
      left:'250px',
      height:parseInt($(this).css("height"))*2 + 'px',
      width:'+=150px'
    });
  });
});
</script>

问题：1. height值没有按照预期，每次变为两倍？

2、为什么打印为 46px？

原因：animate( ) 在调用时，( ) 中并不是一个函数，而是传入的一个对象参数 { }，这个对象参数中并没有this！！

那么，当我们在animate函数的参数中传入this时，这个this指向谁呢？

根据this的基本指向规则：谁调用就指向谁，可以知道。

比如我这里的$(this)是在$("button")的click()事件中调用的，（只是这里将$(this)当作实参传给了animate函数），所以其实这里的$(this)指向的是$("button")。

而button标签的默认高度，正是23px……

结：

jQuery中animate中使用的$(this)，并不指向调用animate的元素，因为他是当作实参传入的，所以这里的$(this)其实指向的是调用animate的元素所在函数/或者事件的调用者。

so 我这里只需要将$(this)改成 $("div")就OK了。

<script src="jQuery v3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    console.log($("div").css("height"));// 点击第一次打印100px 之后点击都打印都是前一次的两倍;
    $("div").animate({
      left:'250px',
      height:parseInt($("div").css("height"))*2 + 'px',
      width:'+=150px'
    });
  });
});
</script>