jQuery仅在已选择时删除突出显示答案

【问题标题】：jQuery remove highlight only if already selectedjQuery仅在已选择时删除突出显示
【发布时间】：2015-06-13 23:30:48
【问题描述】：

这应该是一个非常基本的修复。单击已突出显示的按钮时，我想从中删除选定的类。我希望在任何给定时间只突出显示一个按钮。

http://jsfiddle.net/7wy7sjm5/1/

我之所以让所有这些删除类首先执行是因为当单击一个时，我只想突出显示那个，而不是仍然突出显示之前单击的那些。并且当单击已经突出显示的相同按钮时，想要删除突出显示。希望这是有道理的。

$(".details-btn").on("click", function(){
var $this = $(this);
//Add/Remove selected for button
$(".details-btn").removeClass("selected");
$this.toggleClass("selected");});

可能使用 .each() 循环遍历按钮的每个实例，如果它有类然后删除？我尝试了不同的方法，但都没有按照我想要的方式工作。

【问题讨论】：

我不明白你想要什么。在小提琴中，一次只有一个按钮是selected。当您单击两次按钮时，删除按钮上的selecect 是否存在剩余问题？
没错。您可以在 www.drewcook.net/rockies 上查看我正在尝试完成的实时版本
如果所有答案都不起作用或者您仍然面临问题，请告诉我，以便我明天早上起来提供帮助

标签： javascript jquery html css events

【解决方案1】：

在这种情况下，您可以使用.not()。

基本上，从所有.details-btn 中删除.selected，除了当前带有not(this) 的@。然后，使用toggle()

$(".details-btn").on("click", function() {
  var $this = $(this);
  $(".details-btn").not(this).removeClass("selected");
  $this.toggleClass("selected");
});

$(".details-btn").on("click", function() {
  var $this = $(this);
  $(".details-btn").not(this).removeClass("selected");
  $this.toggleClass("selected");
});

* {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
}
table {
  border: 1px solid;
  text-align: center;
}
thead {
  background-color: #ddd;
}
th {
  border-bottom: 1px solid;
}
td {
  width: 140px;
}
.details-btn {
  background-color: #dad1ea;
  width: 50px;
  margin: 4px auto;
  border: 1px solid #4b3575;
  border-radius: 5px;
  cursor: pointer;
}
.selected {
  color: #fff;
  background-color: #4b3575;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th scope="col">Data</th>
      <th scope="col">View</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>
        <p class="details-btn">+</p>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

完美！我知道这将是这样简单的事情。伟大的思想。非常感谢。
@dcook，很高兴它有帮助:)
对于这里的少数元素，这可能不是问题，但值得记住的是，.not 在经常调用时会降低大量元素的性能。但如前所述，对于常规用例，与我的相比，它是一个更优雅的解决方案。
谢谢@MarkoGrešak。如果我开始使用大型数据集，我会牢记这一点。在这种情况下，我为每场比赛使用一个阵容，将增长到 180 人左右。那会被认为是大吗？我为 index.html 文件写了 5000 行。
这个尺寸可能不会影响你。您可以从优化开始的一件事是将重复使用的值（例如 $(".details-btn")）存储在函数外部的变量中。或者您可以存储当前选定的项目并使用存储的值来删除类，然后将其替换为$(this)。但如果你真的确定这实际上是这部分让一切变慢，我会说先尝试并优化。

【解决方案2】：

在移除之前存储类状态，如果之前没有添加，则添加它。 Fixed Fiddle.

// Store class state.
var hadClass = $(this).hasClass("selected");
// Remove classes from all elements.
$(".details-btn").removeClass("selected");
// If there was no class before removing, the class will be added, otherwise if
// there was a class before, the class will not be added again.
if (!hadClass) {
    $(this).addClass("selected");
}

【讨论】：