Как правильно определить $ (this) в html таблицах

Question

Когда я применяю метод each, я путаюсь с определением this.

Когда я щелкаю элемент, я хотел бы получить каждую ячейку id, но кажется, что this показывает все calendar

мой вопрос

① Почему this показывает #calendar при нажатии на ячейки?

② Как определить и получить каждый id при нажатии клетки?

Если у кого-то возникла такая же проблема, пожалуйста, дайте мне знать.

Спасибо

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 будет относиться к нему всегда.

Вместо этого вам нужно применить each к .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>