Question

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

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

<a href="done.php?as=done&item=<?php echo $item['id']; ?>" class="done-button">Done</a>

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

Answer 1

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

基本上，删除所有.selected中的.details-btn，但当前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>

private ArrayList<ArrayList<String>> quotes;

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

jQuery仅在已选中时删除突出显示

2 个答案: