javascript - jQuery仅在已选择时删除突出显示

Question

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

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() 循环遍历按钮的每个实例，如果它有类则删除？我尝试了不同的方法，但没有一种能按我想要的方式工作。

Answer 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>