Question

我有三类控件，每种都有几个选项：

    <ul class="series-selector-items">
        <li id="filter-type-A">A</li>
        <li id="filter-type-B">B</li>
        <li id="filter-type-C">C</li>
    </ul>
    <ul class="series-selector-items">
        <li id="filter-type-E">E</li>
        <li id="filter-type-F">F</li>
        <li id="filter-type-G">G</li>
    </ul>
    <ul class="series-selector-items">
       <li id="filter-type-H">H</li>
       <li id="filter-type-I">I</li>
       <li id="filter-type-J">J</li>
       <li id="filter-type-K">K</li>
    </ul>

然后我有一个列表，其中的项目包含上述控件的属性组合：

    <ul>
     <li class="A E H">Item AEH</li>
     <li class="A F I">Item AFI</li>
     <li class="A G J">Item AGJ</li>
     <li class="A G H">Item AGH</li>
     <li class="B E H">Item BEH</li>
     <li class="B F H">Item BFH</li>
     <li class="B F H">Item BFH</li>
     <li class="C E I">Item CEI</li>
     <li class="C G K">Item CEI</li>
etc etc...
    </ul>

我正在尝试找到一种基于所选控制选项组合过滤结果的方法。我需要能够选择控制选项的任意组合（例如A E H）并显示具有正确属性的所有项目（项目AEH）。

应在每个类别中选择多个选项（A B E K），并且这些类别应协同工作以显示具有正确元素组合的选项。如果从同一类别中选择了多个选项，则仍应显示其结果。我已将控制列表设为li，但它们也可以是复选框。

使用jQuery执行此操作的最佳方法是什么？

编辑：这是我到目前为止尝试的一种方法，将选定的选项添加到数组中：

var seriesSelected = [];    
$('ul.series-selector-items').click(function(){

            //Select the series clicked and give it the "selected" class
            $(this).toggleClass("selected");

            //Once selected, add the series to the seriesSelected array
            if ($(this).hasClass('selected')) {
               seriesSelected.push($(this).attr('id'));
            }
            //If de-selecting (by toggling off the "selected class"), then remove from the seriesSelected array
            else {
                seriesToRemove = $(this).attr('id');
                seriesSelected = $.grep(seriesSelected, function(value) {
                return seriesToRemove != value;
               });
            }
        });

不确定从哪里开始...

Answer 1

Update with even better filtering

function filterItems() {
    var classSelectors = $(".selected").map(function() {
        var cls = this.id.split('-');
        return '.' + cls.splice(2).join('-');
    }).toArray().join('');

    if (classSelectors) {
        $('#items > li').filter(classSelectors).show('slow');
        $('#items > li').not(classSelectors).hide('slow');
    }
    else {
        //if no filter, show all
        $('#items > li').show('slow');
    }
}

<小时/> Updated Demo

$(document).ready(function() {
    $(".series-selector-items > li").click(function() {
        $(this).toggleClass('selected');
        filterItems();
    });
});

function filterItems() {
    var classSelectors = $(".selected").map(function() {
        var cls = this.id.split('-');
        return '.'+cls.splice(2).join('-');
    }).toArray();

    //if no filter, show all
    if(!classSelectors.length){
        $('#items > li').show('slow');
    }

    $('#items > li').filter(classSelectors.join('')).show('slow');

    $('#items > li').not(function() {
        var self = this;
        var showThis = true;
        $.each(classSelectors, function(i,value) {
            if(!$(self).is(value)) {
                showThis = false;
            }
        });
        return showThis;
    }).hide('slow');
}

Answer 2

可能是这样的：

$('li').not($("#sec li")).on('click', function() {
    if ($('.active').length < 3) {
        $(this).toggleClass('active');
        var letters=[];
        $('.active').each(function(i,e) {
            letters.push(e.id.replace('filter-type-',''));
        });
        if ($('.active').length == 3) {
            var elms = $('#sec li').filter(function() {
                if ($(this).is('.'+letters[0])&&$(this).is('.'+letters[1])&&$(this).is('.'+letters[2])) {
                    return this;
                }
            }).show();
            $('#sec li').not(elms).hide();
        }else{
            $('#sec li').hide();                               
        }
    }else{
        if ($(this).is('.active')) $(this).removeClass('active');
    }
});

FIDDLE

Answer 3

这是我的解决方案：http://jsfiddle.net/NukGM/2/希望你喜欢！

单击字母，选定的字母（红色）将所选ID累积在一个数组中。在每次选择之后，将调用一个单独的方法，该方法突出显示所选ID数组中存在类的任何结果。

Answer 4

这里我已经完成了几个步骤的完整垃圾箱，上面的查询可以理解。你可以找到如下的演示链接：

演示： http://codebins.com/bin/4ldqp90

<强> HTML：

<!-- Select Category Combinators -->
<ul class="series-selector-items">
  <li id="filter-type-A">
    A
  </li>
  <li id="filter-type-B">
    B
  </li>
  <li id="filter-type-C">
    C
  </li>
</ul>
<ul class="series-selector-items">
  <li id="filter-type-E">
    E
  </li>
  <li id="filter-type-F">
    F
  </li>
  <li id="filter-type-G">
    G
  </li>
</ul>
<ul class="series-selector-items">
  <li id="filter-type-H">
    H
  </li>
  <li id="filter-type-I">
    I
  </li>
  <li id="filter-type-J">
    J
  </li>
  <li id="filter-type-K">
    K
  </li>
</ul>
<!-- Search Item from Follwing List based on selected category combinator-->
<ul class="list">
  <li class="A B H">
    Item ABH
  </li>
  <li class="A E H">
    Item AEH
  </li>
  <li class="A F I">
    Item AFI
  </li>
  <li class="A G J">
    Item AGJ
  </li>
  <li class="A G H">
    Item AGH
  </li>
  <li class="B C I">
    Item BCI
  </li>
  <li class="B E H">
    Item BEH
  </li>
  <li class="B F H">
    Item BFH
  </li>
  <li class="C B K">
    Item CBK
  </li>
  <li class="C E I">
    Item CEI
  </li>
  <li class="C G K">
    Item CGK
  </li>
</ul>

<强> CSS：

.series-selector-items{
  display:inline-block;
  list-style:none;
  border:1px solid #3355f9;
  margin:0px;
  padding:0px;
  vertical-align:top;
  background:#fba5a2;
}
.series-selector-items li{
  padding:5px;
}
.series-selector-items li.selected{
  background:#f855f9;
}
.list{
  display:inline-block;
  list-style:none;
  border:1px solid #3355f9;
  margin:0px;
  padding:0px;
  vertical-align:top;
  background:#abd5f9;

}
.list li.searched{
  background: #3344ad;
  color:#dfdbab;
}
.list li{
  padding:3px;
}

<强> jQuery的：

$(function() {

     $(".series-selector-items li").click(function() {

            //Set Default UnSearched List
            $(".list li").removeClass("searched");

            var seriesSelected = new Array();
            //Select the series clicked and give it the "selected" class
            $(this).toggleClass("selected");

            //Get All selected combinators 
            $("li.selected").each(function() {
                seriesSelected.push($.trim($(this).attr('id')).replace('filter-type-', ''));

            });


            //Combinator Exists Then...
            if (seriesSelected.length == 3) {

                //Generate Class Name Combination
                var ClassNames = "." + seriesSelected[0] + "." + seriesSelected[1] + "." + seriesSelected[2];

                //Search Item based on Combinator
                if ($(".list li" + ClassNames).length > 0) {
                    //if Found then add Searched Class on Item
                    $(".list li" + ClassNames).addClass("searched");
                }

            } else {
                $(".list li").removeClass("searched");
            }


    });

});

演示： http://codebins.com/bin/4ldqp90

jquery - 具有多个类别的多选选择过滤器

4 个答案: