javascript - 重新定位 jQuery “this”

Question

我有这个代码：

$('.mainDiv').on('click', function(){
  $(this).animate({'width':'70%', 'height':'70%'}, 300, 'swing');
  $('p', this).stop().animate({'font-size':'70%', 'color':'#000000', 'opacity':'1'}, 300, 'swing',
    function(){
      $(?????).animate({'width':'110%', 'height':'110%', 'opacity':'0'}, 300, 'swing');
    }
  );
});

问题：定位它的孩子后(?????)如何重新定位？".mainDiv""p"

Answer 1

你可以这样做 ：

$('.mainDiv').on('click', function(){
  var $maindiv = $(this); // <= save the external "this"
  $maindiv.animate({'width':'70%', 'height':'70%'}, 300, 'swing');
  $('p', this).stop().animate({'font-size':'70%', 'color':'#000000', 'opacity':'1'}, 300, 'swing',
    function(){
      $maindiv.animate({'width':'110%', 'height':'110%', 'opacity':'0'}, 300, 'swing');
    }
  );
});

Answer 2

您可以使用：

var $this=$(this);

然后$this在需要引用原始元素时使用。

Answer 3

我宁愿建议使用：

$('.mainDiv').on('click', function(){
  var that = this;
  $(this).animate({'width':'70%', 'height':'70%'}, 300, 'swing');
  $('p', this).stop().animate({'font-size':'70%', 'color':'#000000', 'opacity':'1'}, 300, 'swing',
  function(){
      $(that).animate({'width':'110%', 'height':'110%', 'opacity':'0'}, 300, 'swing');
  });
});

主要思想是将变量“附加”到其他变量，我个人喜欢将其称为“那个”，但几乎没有可能的方法。