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

主なアイデアは、変数を他の変数に「アタッチ」することです。個人的には「それ」と呼ばれるのが好きですが、可能なアプローチはほとんどありません。