如何检查 html 表中的 hasClass

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(){&nbsp; id=$(this).index();&nbsp; $(this).toggleClass("aqua", $("td.color").eq(id).hasClass("aqua"));});td {&nbsp; transition-duration: 0.5s;&nbsp; border: solid black 1px;&nbsp; padding: 5px;}.number{cursor:pointer;}table {&nbsp; border-collapse: collapse;}.color{&nbsp;padding:5px;&nbsp;}&nbsp;.aqua {&nbsp; 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++) {&nbsp; i = i + 1;&nbsp; html += '<td class="number">' + i +'</td>'}html += '</tr>';for (let w = 0; w < 1; w++) {&nbsp; html += '<tr>';&nbsp; for (let d = 0; d < 15; d++) {&nbsp; &nbsp; html += '<td class="color"></td>'&nbsp; &nbsp; }&nbsp; &nbsp; html += '</tr>';&nbsp; }html += '</table>'document.querySelector('#calendar').innerHTML = html;const arr = [1, 2, 10, 11, 14];$("td.color")&nbsp; .filter(function() { return arr.includes($(this).index()+1); })&nbsp; .addClass('aqua');</script>

Answer 2

您需要通过使用eq()而不是index()访问您需要的元素来更改选择器：$("td.number").click(function(){&nbsp; var id = $ (this).index();&nbsp; $("td.color").eq(id).hasClass("aqua");});