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

不应该在include和exclude按钮上都有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>

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

1 个答案: