jquery的 - 與多個類別

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