Javascript 单击表格单元格并处理每个单元格的类更改

我有一张这样的桌子：

<table class="ui celled table unstackable" id="tblHits">
        <thead>
            <tr>
                <th>40</th>
                <th>40</th>
                <th>40</th>
                <th>25</th>
                <th>15</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="addNone" id="t01">01</td>
                <td class="addNone" id="t02">02</td>
                <td class="addNone" id="t03">03</td>
                <td class="addNone" id="t04">04</td>
                <td class="addNone" id="t05">05</td>
            </tr>
        </tbody>
    </table>

我想做的是单击ID=t01的TD将该类从一个类更改为另一个类。这些类被定义为仅更改背景颜色。我已经添加了一些代码，实际上已经能够选择一个TD了，但是由于某种原因，我不能在id=t03之后单击TD。什么也没发生。有什么办法吗

我的剧本是这样的：

$("#tblHits:has(td)").click(function(e) {
    var clickedCell= $(e.target).closest("td");
    if ( $('#t'+ clickedCell.text() + '').hasClass( "addNone" )) {
         $("#tblHits td").removeClass("addNone");
         $('#t'+ clickedCell.text() + '').addClass("addHit");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
    }
    else if ( $('#t'+ clickedCell.text() + '').hasClass( "addHit" )) {

         $("#tblHits td").removeClass("addHit");
         $('#t'+ clickedCell.text() + '').addClass("addMiss");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
     }
     else if ( $('#t'+ clickedCell.text() + '').hasClass( "addMiss" )) {
         $("#tblHits td").removeClass("addMiss");
         $('#t'+ clickedCell.text() + '').addClass("addNone");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
     });

---

提前感谢您对此问题的任何反馈

您可以在所有td上绑定一个点击事件，并且对于每个事件，您可以根据需要更改css

无需使用此$'t'+clickedCell.text

---

尝试使用事件委派来侦听对更高元素的单击—您这样做的目的是侦听对表的单击。 但是，获取单击的单元格似乎没有按计划工作

您可以检查单击的元素是否是您想要的td，然后从那里开始工作。这也会提高性能，因为如果单击了您不感兴趣的内容，您可以退出脚本

$'tblHits'。单击，函数evt{ var$td=$evt.target； 如果！$td.is'td'返回； 如果$td.hasClass'addNone'{ $td.removeClass'addNone'。addClass'addHit'； }否则 如果$td.hasClass'addHit'{ $td.removeClass'addHit'.addClass'addMiss'； }否则 如果$td.hasClass'addMiss'{ $td.removeClass'addMiss'。addClass'addNone'； } }; 看这把小提琴：

顺便说一句，我建议在td中添加另一个选择器，例如另一个类名。 例如：

然后是JS：

$'tblHits'。单击，函数evt{ var$td=$evt.target； 如果！$td.is'.hitbox'返回； //等等。。 };

---

通过这种方式，您可以使用其他td元素，甚至可以根据需要更改为其他元素。JS不需要更改，只要要选中的元素具有classname hitbox。

要在单击特定td后或在单击表后更改类吗？单击特定td后。它应该在我点击的基础上添加类。它似乎在点击上起作用，但由于某种原因，它没有像我希望的那样处理它。它似乎是随机添加了一些类。但是我也发现我从错误的参数中删除了这个类。它不应该从$TBL中删除它的td.removeClassaddNone；而是$'t'+clickedCell.text+.removeClassaddNone。感谢您的解决方案。代码工作得很好！但是我应该如何使用你提到的td.selector呢？而不是你写的第一句话？是的，我没那么清楚。我修改了答案来解释我的意思。如果我的回答对你有帮助，你能投票吗？谢谢杰出的谢谢你的编辑。我将投票反对这一诅咒。

$( "td" ).each(function(index) {
  $(this).on("click", function(){

    if ($(this).hasClass('addNone')) {
       $(this).removeClass('addNone').addClass('addHit');
    } else if ($(this).hasClass('addHit')) {
       $(this).removeClass('addHit').addClass('addMiss');
    } else if ($(this).hasClass('addMiss')) {
       $(this).removeClass('addMiss').addClass('addNone');
    }

  });
});