if或

Question

產品過濾器

我正試圖獲得產品過濾器的工作，幾乎就在那裏。我希望用戶能夠選擇襯衫，然後顯示所有襯衫，然後顯示所有藍色襯衫，然後在他們檢查粉紅色時顯示所有藍色和粉紅色襯衫。目前，我只能得到它顯示，如果所有條件都滿足，但我希望它顯示，如果任何數據集的是真實的

我的小提琴是這裏

http://jsfiddle.net/ktcle/2keVN/2/

$('div.tags').delegate('input[type=checkbox]', 'change', function() 
{ 
var $lis = $('.results > li'), 
    $checked = $('input:checked'); 

if ($checked.length) 
{ 
    var selector = $checked.map(function() 
    { 
     return '.' + $(this).attr('rel'); 
    }).get().join(''); 

    $lis.hide().filter(selector).show().addClass("show");  
} 
else 
{ 
    $lis.show().removeClass("show"); 
} 
}); 

Answer 1

試試這個：

編輯：我修改了該方法以便能夠獨佔地進行過濾。這樣，你可以通過襯衫和褲子來過濾綠色或粉紅色。

$(function(){ 
    $('div.tags').delegate('input[type=checkbox]', 'change', function() 
    { 
     var $lis = $('.results > li'), 
      $types = $('.filter-grp-type input:checked'), 
      $colors = $('.filter-grp-color input:checked'); 

     if ($types.length) 
     { 
      var selector = $types.map(function() 
      { 
       return '.' + $(this).attr('rel'); 
      }).get().join(', '); 

      $lis.hide().filter(selector).show();  
     } 
     else 
     { 
      $lis.show(); 
     } 

     $lis = $lis.filter(":visible"); 

     if ($colors.length) 
     { 
      var selector = $colors.map(function() 
      { 
       return '.' + $(this).attr('rel'); 
      }).get().join(', '); 

      $lis.hide().filter(selector).show();  
     } 
    }); 
}) 

當你建立你的「選擇器」字符串，你只是連接它。然後，jQuery將只篩選那些在你的選擇器中擁有所有類的項目。

我同意戴維托馬斯。相反，服裝類型的選擇是相互排斥的，即單選按鈕。

Answer 2

我建議首先改變你的HTML，以反映你只需要選擇的服裝一類（所以使用<input type="radio" />）：

<div class="tags"> 
    <fieldset class="filter-grp"> 
    <label><input type="radio" rel="skirt" name="year" /> skirt </label><br> 
    <label><input type="radio" rel="trousers" name="year" /> trousers </label><br> 
    <label><input type="radio" rel="shirt" name="year" /> shirt </label><br> 
    </fieldset> 
    <br> 
    <fieldset class="filter-grp"> 
    <label><input type="checkbox" rel="blue" name="type" /> blue</label><br> 
    <label><input type="checkbox" rel="pink" name="type" /> pink</label><br> 
    <label><input type="checkbox" rel="green" name="type" /> green</label><br> 
    </fieldset> 
    <br> 
</div> 

<ul class="results"> 
    <li class="blue skirt"> blue skirt</li> 
    <li class="pink shirt">pink shirt</li> 
    <li class="pink skirt">pink skirt</li> 
    <li class="blue shirt">blue shirt</li> 
    <li class="blue trousers">blue trousers</li> 
    <li class="green skirt">green skirt</li> 
    <li class="blue shirt">blue shirt</li> 
    <li class="pink trousers">pink trousers</li> 
    <li class="blue trousers">blue trousers</li> 
    <li class="blue skirt">blue skirt</li> 
    <li class="green shirt">green shirt</li> 
</ul> ​ 

用下面的jQuery：

$(function() { 
    $('div.tags').delegate('input[type=checkbox],input[type=radio]', 'change', function() { 
     var $lis = $('.results > li'), 
      $category = $('input:radio:checked') 
      .attr('rel'), 
      $colors = $('input:checkbox:checked'), 
      selectors = $colors.map(
       function(){ 
        return '.' + $category + '.' + $(this).attr('rel'); 
       }).get().join(', '); 
     if ($category.length && $colors.length) { 
         $lis 
          .hide() 
          .filter(selectors) 
          .show() 
          .addClass("show"); 
     } 
     else { 
      $lis.show().removeClass("show"); 
     } 
    }); 
})​​ 

JS Fiddle demo。