j查询删除突出显示仅在已选中时

jQuery remove highlight only if already selected

本文关键字：显示 查询 删除      更新时间：2023-09-26

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

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

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

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

可能使用 .each（） 循环浏览按钮的每个实例，如果它有类然后删除？ 我尝试了不同的方法，但没有一种方法按照我想要的方式工作。

在这种情况下，你可以使用 .not（）。

基本上，从除当前带有not(this)的当前.details-btn之外的所有中删除.selected。然后，使用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>

在删除之前存储类状态，如果之前未添加，则添加它。固定小提琴。

// 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");
}
相关文章：