jQueryのthisについて

カテゴリー︎： 【JavaScript】・【jQuery】

jQueryのthisの動きをメモ

<body>
  <style>
  .clicktest {
    background: pink;
    padding: 20px;
    margin: 0 0 5px;
  }
  </style>
  <h1>thisについて</h1>
  <pre>
  イベントハンドラの中において
【this】にはイベントが発生した要素が格納される


ここでは、クリックすると
text()で書き換えられた
＜div class="clicktest"＞クリックでーす。＜/div＞
が thisに入る
</pre>
  <div class="clicktest">Div1</div>
  <div class="clicktest">Div2</div>
  <div class="clicktest">Div3</div>
  <div class="clicktest">Div4</div>
  <div class="clicktest">Div5</div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    /*
    ダメな記述例⇒全部に影響がある
  $(function() {
    var ele = $('.clicktest');
    ele.click(function() {
      ele.text('クリックしたね！');
    });
  });
  */
  $(function(){
    $('.clicktest').click(function(){
      $(this).text('クリックでーす。');
      console.log(this);
    })
  })
  </script>
</body>
PAGE TOP