jQueryにおける$(this)について

jQueryにおける$(this)を使う事で、下記のように、同一のクラスに対してjQueryで何か操作をするとき、イベントがあった特定の要素にのみ動きをつけたり、値を取得したりできます。

言葉だと説明しづらいので、CodePenやテキストエディタで以下のコードを入力してみてください。

動画も載せておきます。

/*html*/

<p>ボタンを押すと色が変わります。</p>

<p>thisを使わないと・・・

<div class="box-container1">

  <button class="box1"></button>

  <button class="box1"></button>

  <button class="box1"></button>

</div>

<p>ボタンを押すと色が変わります。</p>

<p>thisを使うと・・・

<div class="box-container1">

  <button class="box2"></button>

  <button class="box2"></button>

  <button class="box2"></button>

</div>

/*css*/

.box1{

  width:4rem;

  height:1rem;

  margin-right:1rem;

}

.box1.is-click{

  background-color:red;

}

.box2{

  width:4rem;

  height:1rem;

  margin-right:1rem;

}

.box2.is-click{

  background-color:red;

}

/*js*/

$('.box1').on('click',function(){

  $('.box1').toggleClass('is-click');

});

$('.box2').on('click',function(){

  $(this).toggleClass('is-click');

});