javascript - jQuery:toggleClass，多个 <td> 元素，只有一个突出显示

Question

HTML

<table cellpadding=10>
  <tr>
    <td id="g1" class="tdback">test 1</td>
    <td>
      <button onclick="clickHighlightTd(g1);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g2" class="tdback">test 2</td>
    <td>
      <button onclick="clickHighlightTd(g2);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g3" class="tdback">test 3</td>
    <td>
      <button onclick="clickHighlightTd(g3);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g4" class="tdback">test 4</td>
    <td>
      <button onclick="clickHighlightTd(g4);">click</button>
    </td>
  </tr>
</table>

---

CSS

.tdback {
  background-color: #ffffff;
}

.tdhighlight {
  background-color: #999999;
}

---

JS

function clickHighlightTd(str) {
  $(str).toggleClass('tdhighlight');
}

---

我想点击一个按钮，同一行中的 td 应该将类切换为“.tdhighlight”，当点击任何其他按钮时，前一个(或所有其他 td)应该获得标准类(“。 tdback") 并且这一行中的 td 应该突出显示。

这是一个 JSFiddle。不幸的是，该代码在我的网站上有效，但在 JSFiddle 中无效。也许我错过了什么。

感谢您的帮助!

---

JSFiddle

---

Answer 1

您需要在选择器名称之前加上#，并且您必须首先从所有 td 中删除该类

function clickHighlightTd(str) {
  $("td").removeClass('tdhighlight');
  $("#"+str).addClass('tdhighlight');
}

作为替代方案，删除 onclick 属性并使用以下代码

$(document).ready(function(){
    $("button").click(function(){
      $("td").removeClass('tdhighlight');
      $(this).parent().find("td").addClass("tdhighlight");
    }); 
});