如何在html表格中正确定义$(this)

Question

当我应用each方法时，我对定义感到困惑this。当我单击 element 时，我想获取每个单元格id，但似乎this显示整个单元格calendar我的问题是① 为什么点击单元格时this会显示？#calendarid②单击单元格时如何定义和获取每个单元格？如果有人遇到过同样的问题，请告诉我。谢谢var $ = jQuery;const $days = $(this).find('.day');function register() {  function clicked() {    alert("clicked");    $(this).toggleClass('is-clicked');        let clickedID=$(this).attr('id');    console.log("clickedID",clickedID);  }  $(this).on({    click: clicked  });}$("#calendar").each(register);td {  padding: 10px;  border: solid black 1px;}table {  border-collapse: collapse;}.is-clicked {  background-color: aqua;}td:hover {  background-color: yellow;}<script src="https://code.jquery.com/jquery-3.3.1.js"></script><div id=calendar>  <table>    <tr>      <td id=1 class=day>1</td>      <td id=2 class=day>2</td>      <td id=3 class=day>3</td>    </tr>  </table></div>

Answer 1

您each在 上应用#calendar，它会将处理程序应用于该对象，因此this将始终引用它。

相反，您需要应用eachon.day来迭代单元格和绑定处理程序。

$("#calendar .day").each(register);

function register() {

  function clicked() {

    alert("clicked");

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

    let clickedID = $(this).attr('id');

    console.log("clickedID", clickedID);

  }

  $(this).on({

    click: clicked

  });

}

$("#calendar .day").each(register);

td {

  padding: 10px;

  border: solid black 1px;

}

table {

  border-collapse: collapse;

}

.is-clicked {

  background-color: aqua;

}

td:hover {

  background-color: yellow;

}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>

  <table>

    <tr>

      <td id=1 class=day>1</td>

      <td id=2 class=day>2</td>

      <td id=3 class=day>3</td>

    </tr>

  </table>

</div>

Answer 2

this指的是日历。删除this并添加td.

var $ = jQuery;

const $days = $(this).find('.day');

function register() {

  function clicked() {

    alert("clicked");

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

    

    let clickedID=$(this).attr('id');

    console.log("clickedID",clickedID);

  }

  console.log(this) 

  $('td').on({  //===========> Add td instead of this

    click: clicked

  });

}

$("#calendar").each(register);

td {

  padding: 10px;

  border: solid black 1px;

}

table {

  border-collapse: collapse;

}

.is-clicked {

  background-color: aqua;

}

td:hover {

  background-color: yellow;

}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>

  <table>

    <tr>

      <td id=1 class=day>1</td>

      <td id=2 class=day>2</td>

      <td id=3 class=day>3</td>

    </tr>

  </table>

</div>