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

Question

我有一张看起来像这样的表:

<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());
     });

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

Answer 1

尝试使用“事件委托(delegate)”来监听对更高元素的点击(你这样做了，监听了对表格的点击)。但是，获取点击的单元格似乎没有按计划工作。

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

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('td')) return;

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

请参阅此 fiddle :https://jsfiddle.net/bkry0txr/4/

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

<tr>
  <td class="hitbox addNone"></td>
  <td class="hitbox addHit"></td>
  <!-- etc -->
</tr>

然后是 JS:

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('.hitbox')) return;
    // etc..
});

这样您就可以拥有其他 td 元素，如果您愿意，甚至可以更改为其他元素。 JS 不需要更改，只要您要检查的元素具有类名 hitbox。