在包含/排除按钮组之间切换活动类别 [英] Switch active class between groups of include/exclude buttons

问题描述

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

I have an application which provides a list of filters.

每个过滤器都有一个包含"和排除"按钮，例如:

Each filter has an "include" and "exclude" button, for example:

<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

因此，这将呈现一个+(用于"include")和-(用于"exclude")按钮，并在其旁边列出过滤器名称.按钮的name属性显示它是包含(include_)还是排除(exclude_)过滤器的按钮，后跟来自数据库的ID号.

So this renders a + (for "include") and - (for "exclude") button with the filter name listed beside it. The name attribute of the buttons shows whether it is a button to include (include_) or exclude (exclude_) the filter, followed by an ID number that comes from a database.

单击任何按钮时，我在按钮上放置一个active类.我最近询问了如何切换这些按钮:

When any of the buttons are clicked I place an active class on the button. I recently asked about how to toggle those buttons: Toggle active class on a button but maintain state of other buttons

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

However, I have a separate issue. If I click, for example, - on Filter 1 it will add the active class:

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

在包含和排除按钮上都不能同时具有active类.但是，我不确定如何执行此操作.目前，可以单击过滤器1上的+，并且两者都将获得active类:

It should not be possible to have the active class on both the include and exclude button. However, I'm not sure how to do this. At the moment, it's possible to click the + on Filter 1 and both will get the active class:

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

我想要的实际上就像单选按钮一样，对于特定的过滤器，在任何时候都只能同时激活+或-.但是，这些必须是按钮元素，而不是单选按钮，因此我不想更改type属性.

What I want is effectively like radio buttons, where it's only possible to have either + or - active at any one time for a specific filter. However these must be button elements, not radio buttons, so I don't want to change the type attribute.

我看过 jQuery:取消选中一个已选中的其他复选框，但这略有不同，因为它使用单选按钮，并且也取消选中所有其他复选框.在这种情况下，我希望它适用于过滤器组-即更改过滤器1不会影响过滤器2 ，依此类推?

I've had a look at jQuery: Uncheck other checkbox on one checked but this is slightly different as it uses radio buttons and also unchecks all other checkboxes. In this case I want it to apply to groups of filters - i.e. changing Filter 1 should not affect Filter 2, etc. Is this possible?

推荐答案

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

What I have done here is put each pair inside a div that has a class of .filterGroup. This means they are separated from the other groups.

此外，我然后在jQuery中使用siblings()函数检查是否找到了一个类，然后将其删除.具有活动类的文本将变为red.

Alongside this, I am then using the siblings() function in jQuery to check if a class is found and then remove it. You can see the text changes to red once it has the active class.

$("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>

这篇关于在包含/排除按钮组之间切换活动类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！