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

【问题标题】：jQuery: toggleClass, multiple <td>-elements, only one highlightedjQuery：toggleClass，多个 <td> 元素，只有一个突出显示
【发布时间】：2016-06-08 00:15:28
【问题描述】：

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

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

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

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

感谢您的帮助！

JSFiddle

【问题讨论】：

顺便说一句，您的 onclick 函数未在 JSFiddle 中运行的原因是 JSFiddle 使用 iFrames 和加载处理程序的方式。让你的 onclick 函数在 JSFiddle 范围内运行到窗口（不要使用var）：clickHighlightTd = function(str) { $(str).toggleClass('tdhighlight'); }

标签： javascript jquery button onclick toggleclass

【解决方案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");
    }); 
});

【讨论】：

【解决方案2】：

你快到了：

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

更新小提琴：https://jsfiddle.net/h11pqubz/3/

顺便说一句，TD 永远不会“丢失”tdback 类 - 另一个类 tdhighlight 被额外添加（这意味着 TD 同时具有两个类），当 tdhighlight 被删除时，他们还有tdback。

【讨论】：

$(str) 不会工作，除非函数使用像“#g4”这样的变量调用
你说得对，它应该不起作用，但我没有注意到，因为它在小提琴中起作用。
嗯，要让$("#"+str) 工作，您必须调用onclick="clickHighlightTd('g1');"（注意单引号）。我必须承认，我不完全确定浏览器如何处理不带引号的g1，但它似乎传递了整个元素，而不仅仅是一个字符串。
我认为它是由缺少 jQuery 时 jsFiddle 使用的 js 脚本造成的。我在 jsFiddle 控制台（主包装器的 id HW_frame_cont）中输入了 $("#HW_frame_cont") ，它返回了 null 而 $("HW_frame_cont") 返回了目标元素。
如果你想为多个元素分配相同的属性值，那么你应该使用class而不是id。 Id 用于唯一选择器，并且只会匹配您遇到的第一个选择器。

【解决方案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 方面的技能和知识，我找到了这种方法来让它工作。我希望这会有所帮助:)

【讨论】：

【解决方案4】：

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

【讨论】：