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 应该将 class 切换为“.tdhighlight”，当点击任何其他按钮时，前一个（或所有其他 td）应该得到标准 class (".tdback") 和这一行中的 td 应该突出显示。

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

感谢您的帮助！

JSFiddle

Answer 1

你快完成了：

function clickHighlightTd(str) {
  // remove class from all TD elements
  $("td").removeClass('tdhighlight');
  // your choice: use addClass/toggleClass as you prefer
  $(str).addClass('tdhighlight');
}

已更新 fiddle：https://jsfiddle.net/h11pqubz/3/

顺便说一下，TDs 永远不会 "lose" class tdback - 另一个 class tdhighlight 是另外添加的（也就是说，TDs同时拥有两个 classes），当移除 tdhighlight 时，他们仍然拥有 tdback.

Answer 2

您需要在选择器名称之前使用#，并且您必须首先从所有 td

中删除 class

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

Answer 3

如果你不介意的话，我修改了代码，这样我就可以让它工作了，但这里是：

HTML:

<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>

CSS:

.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}

JS/JQUERY:

$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});

注意：可能还有另一种更简单的方法可以让它工作，但鉴于我在 JS/JQUERY 方面的技能和知识，我发现了这种方法可以让它工作。希望对您有所帮助:)

Answer 4

解决方案终于来了：https://jsfiddle.net/h11pqubz/8/

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

jQuery: toggleClass, multiple <td>-elements, only one highlighted

javascript

jquery

button

onclick

toggleclass

JSFiddle