在包含/排除按钮组之间切换活动类

Question

我有一个提供过滤器列表的应用程序。

每个过滤器都有一个“包含”和“排除”按钮，例如：

<input type="button" name="include_337" value="+"> 
<input type="button" name="exclude_337" value="-"> Filter 1

<input type="button" name="include_856" value="+"> 
<input type="button" name="exclude_856" value="-"> Filter 2

因此，这会呈现一个+（用于“包含”）和-（用于“排除”）按钮，其旁边列出了过滤器名称。按钮的 name 属性显示它是包含 (include_) 还是排除 (exclude_) 过滤器的按钮，后跟来自数据库的 ID 号。

当点击任何按钮时，我会在按钮上放置一个active 类。我最近询问了如何切换这些按钮：Toggle active class on a button but maintain state of other buttons

但是，我有一个单独的问题。例如，如果我在过滤器 1 上单击 -，它将添加 active 类：

<input type="button" name="include_337" value="+"> 
<input type="button" name="exclude_337" class="active" value="-"> Filter 1

不应在包含和排除按钮上都有active 类。但是，我不知道该怎么做。目前，可以单击过滤器 1 上的 +，两者都将获得 active 类：

<input type="button" name="include_337" class="active" value="+"> 
<input type="button" name="exclude_337" class="active" value="-"> Filter 1

我想要的实际上类似于单选按钮，其中只能在任何时候让+ 或- 处于活动状态对于特定的过滤器。但是这些必须是按钮元素，而不是单选按钮，所以我不想更改 type 属性。

我查看了jQuery: Uncheck other checkbox on one checked，但这略有不同，因为它使用单选按钮并且还取消选中所有其他复选框。在这种情况下，我希望它应用于过滤器组 - 即 更改过滤器 1 不应影响过滤器 2 等。这可能吗？

Answer 1

我在这里所做的是将每一对放在一个具有.filterGroup 类的 div 中。这意味着它们与其他组是分开的。

除此之外，我还使用 jQuery 中的 siblings() 函数来检查是否找到了一个类，然后将其删除。一旦有活动的类，您可以看到文本更改为red。

$("input").click(function() {
  var $this = $(this);

  $this.toggleClass("active");

  if ($this.siblings().hasClass("active")) {
    $this.siblings().removeClass("active")
  }
});

input.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filterGroup">
  <input type="button" name="include_337" value="+">
  <input type="button" name="exclude_337" value="-"> Filter 1
</div>

<div class="filterGroup">
  <input type="button" name="include_856" value="+">
  <input type="button" name="exclude_856" value="-"> Filter 2
</div>