Как проверить hasClass в html таблицах

Question

Когда я создаю таблицы, и я хотел бы проверить, каждый ли элемент hasClass, нажав соответствующие ячейки (над ячейками)

Моя работа похожа на ниже.

Но это не так работать хорошо.

Как мне этого добиться?

И что за точка?

Спасибо

$("td.number").click(function(){
  id=$(this).index();
  $("td.color").index(id).hasClass("aqua");
  });

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

.number{
cursor:pointer;}

table {
  border-collapse: collapse;
}

.color{
 padding:5px;
 }
 
.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;

html += '<tr>';
for (let d = 0; d < 15; d++) {
  i = i + 1;
  html += '<td class="number">' + i +'</td>'
}
html += '</tr>';

for (let w = 0; w < 1; w++) {
  html += '<tr>';
  for (let d = 0; d < 15; d++) {
    html += '<td class="color"></td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

const arr = [1, 2, 10, 11, 14];

$("td.color")
  .filter(function() { return arr.includes($(this).index()+1); })
  .addClass('aqua');
</script>

Answer 1

.index() используется для возврата позиции в виде целого числа, а не для поиска элемента на основе его индекса - для этого вы хотите .eq()

Обновленная скрипта:

$("td.number").click(function(){
  id=$(this).index();
  $(this).toggleClass("aqua", $("td.color").eq(id).hasClass("aqua"));
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

.number{
cursor:pointer;}

table {
  border-collapse: collapse;
}

.color{
 padding:5px;
 }
 
.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;

html += '<tr>';
for (let d = 0; d < 15; d++) {
  i = i + 1;
  html += '<td class="number">' + i +'</td>'
}
html += '</tr>';

for (let w = 0; w < 1; w++) {
  html += '<tr>';
  for (let d = 0; d < 15; d++) {
    html += '<td class="color"></td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

const arr = [1, 2, 10, 11, 14];

$("td.color")
  .filter(function() { return arr.includes($(this).index()+1); })
  .addClass('aqua');
</script>

Answer 2

Вам нужно изменить селектор, используя eq(), а не index() для доступа к нужному элементу:

$("td.number").click(function(){
  var id = $ (this).index();
  $("td.color").eq(id).hasClass("aqua");
});