Question

我有一个页面，我希望用户能够同时过滤许多不同的类。目前，我使用以下内容允许他们一次只过滤1个类：

$(document).ready(function(){
            $(".filter-button").click(function(){
                var value = $(this).attr('data-filter');

                if(value == "all")
                {
                    $('.filter').show('1000');
                }
                else
                {
                    $(".filter").not('.'+value).hide('3000');
                    $('.filter').filter('.'+value).show('3000');                    
                }
            });

        });

所以，让我们说有一个动物名单，我想找到所有的橙色猫。目前我只能找到所有的猫或所有的橙色动物，而不是将两者结合起来才能找到橙色的猫。

编辑：我现在拥有的Here is a Fiddle example。我正在寻找的是能够点击Cats，然后点击Orange，并让它只显示＆＃34; Orange Cat＆＃34;。

编辑2（已解决）： Me.Name的答案提供了我需要的解决方案。我稍微改进了一下，允许按钮打开和关闭（支持2个以上的过滤器） - Fiddle。

Answer 1

修改基于更新的问题，我在原始答案中反转了目标（并且在其他杂务之间进行了一些快速编辑并不是很好：D），但可以使用相同的原则：基于组合类创建选择器。也许复选框会更好，但通过使用按钮和一个额外的'检查'类：

$(document).ready(function(){ var targets = $('.filter'), buttons = $('.filter-button').click(function(){ var value = $(this).data('filter'); if(value == "all") buttons.removeClass('checked'); else $(this).toggleClass('checked'); var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}); //create array of filters if(checkedClasses.length === 0) targets.show('1000'); else { var selector = '.' + checkedClasses.join('.'), //create selector of the combined classes show = targets.filter(selector); targets.not(show).hide('3000'); show.show('3000'); } }); });

.checked{ font-style: italic; background-color:yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="filter-button" type="button" data-filter="all">Show All</button> <button class="filter-button" type="button" data-filter="cat">Cats</button> <button class="filter-button" type="button" data-filter="orange">Orange</button> </div> <div> <p class="filter cat">Cat</p> <p class="filter orange">Orange</p> <p class="filter cat orange">Orange Cat</p> <p class="filter cat pink">Pink panther</p> </div>

Orignal回答（用于过滤更多属性）：

您可以将所有值放在'data-filter'属性中并将它们解析为选择器，但为了使生活更轻松，您还可以将整个（jQuery）选择器放在属性中。因此，使用data-filter = 'orange'而不是data-filter = '.orange'代替data-filter= '.orange,.animal'：$(".filter").not(value)当然，不应在处理程序内添加额外的点，而是直接使用，例如$(function(){ var targets = $('.filter'); $('.filter-all').click(function(){ targets.show(1000); }); //put the 'all' in a separate class with seperate handler to prevent the if, but that's just a preference $('.filter-button').click(function(){ var selector = $(this).data('filter'); targets.not(selector).hide('3000'); targets.filter(selector).show('3000'); }); })

示例：

.filter{ border:1px solid blue; background-color:lightblue; height:50px; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='filter-all' data-filter= 'all'>All</button> <button class='filter-button' data-filter= '.d1'>1</button> <button class='filter-button' data-filter= '.d2'>2</button> <button class='filter-button' data-filter= '.d3'>3</button> <button class='filter-button' data-filter= '.d1,.d3'>1 + 3</button> <div class='d1 filter'>1</div> <div class='d2 filter'>2</div> <div class='d3 filter'>3</div>

`alert icmp any any -> $HOME_NET any (msg:"ICMP test detected"; GID:1;sid:10000001; rev:001; classtype:icmp-event;)`

Answer 2

以下是适合您的代码：

更新你的html，用＆＃34;添加数据过滤器。＆＃34;也是：

＆＃13;

$(document).ready(function() {
  $(".filter-button").click(function() {
    $(this).toggleClass('active')
    var value = $(this).attr('data-filter');
    var active = $(this).hasClass('active');
    $('.filter').hide();
    if (value == "all" && active) {
      $('.filter').show('1000');
      return;
    }
    $(".filter-button.all").removeClass('active')
    var cFilter = "";
    $('.filter-button.active').each(function() {
      cFilter += "." + $(this).attr('data-filter');
    });
    $('p.filter').filter(cFilter).show('3000');

  });
});

＆＃13;

.active {
  border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>
  <div>
    <button class="filter-button all" type="button" data-filter="all">Show All</button>
    <button class="filter-button" type="button" data-filter="cat">Cats</button>
    <button class="filter-button" type="button" data-filter="orange">Orange</button>
  </div>

  <div>
    <p class="filter cat">Cat</p>
    <p class="filter orange">Orange</p>
    <p class="filter cat orange">Orange Cat</p>
  </div>

</body>

＆＃13;

Answer 3

我们走吧！

首先我们创建一个过滤器数组，这样 - 无论添加到列表中的项目数量如何 - 我们总是会有适当数量的按钮。

// Create an array of filters
var filtersArray = [];

// Retrieve all the possible filters from the DOM
$(".filter").each(function(){
    var classes = $(this).attr("class").split(" ");
    classes.forEach(function(e) {filtersArray.push(e.toString());});
});

// Select only unique values, remove empty values and take away the "filter" class, since it's not a real filter
var filtersUnique = filtersArray.filter(function(el,i) {return i == 
filtersArray.indexOf(el);});
var filtersEmpty = filtersUnique.filter(function(v){return v!==''});
var filters = filtersEmpty.filter(function(v){return v!=='filter'});

// Create a button for each filter
$.each(filters,function(k,v){
    $(".filters").append('<button class="filter-button" type="button" data-filter="'+v+'">'+v+'</button>');
});

click函数本身隐藏了没有特定类的所有元素。

// Click Function
$(".filter-button").click(function(){
  var dataFilter = $(this).attr("data-filter");
  var dataFilterClass = ("."+dataFilter);
  $(".filter").not(dataFilterClass).addClass("hidden");
});

编辑。忘了Jsfiddle：https://jsfiddle.net/uaf5rLdt/

添加一些逻辑以隐藏不再有用的按钮（例如＆＃34; Horse＆＃34;＆＃34; Dog＆＃34;，每当用户点击＆＃34; Cat＆＃34;。）

使用jQuery过滤多个类

3 个答案: