jQuery產品過濾器使用複選框和：contains（）顯示/隱藏

Question

我正在嘗試爲商店列出一個簡單的jQuery產品過濾器，該過濾器列出了一個頁面上的所有類別的產品。由於商店的設置方式，這無法通過AJAX實現。

簡而言之，該類別的所有產品都在一個頁面上。他們有不同品牌的產品名稱和團隊名稱。標記看起來像這樣（最後的形式是我打算如何做這個過濾器）。

<div id="CategoryContent"> 
<ul> 

<li class="product">Brand1 PRODUCT1 TeamA</li> 
<li class="product">Brand1 PRODUCT2 TeamB</li> 
<li class="product">Brand2 PRODUCT3 TeamB</li> 
<li class="product">Brand2 PRODUCT4 TeamC</li> 
<li class="product">Brand3 PRODUCT5 TeamA</li> 
<li class="product">Brand3 PRODUCT6 TeamD</li> 
<li class="product">Brand4 PRODUCT7 TeamD</li> 
<li class="product">Brand1 PRODUCT8 TeamA</li> 
<li class="product">Brand1 PRODUCT9 TeamA</li> 
<li class="product">Brand1 PRODUCT10 TeamB</li> 
<li class="product">Brand4 PRODUCT11 TeamD</li> 
<li class="product">Brand2 PRODUCT12 TeamA</li> 
</ul> 

<div style="clear:both;"></div> 
<div class="filter"> 
<form id= "brandfilter" action=""> 
    <h2>Brands:</h2> 
<input type="checkbox" name="brand" value="Brand1"/>Brand1 </br> 
<input type="checkbox" name="brand" value="Brand2"/>Brand2 </br> 
<input type="checkbox" name="brand" value="Brand3"/>Brand3 </br>  
<input type="checkbox" name="brand" value="Brand1"/>Brand4 </br> 
</form> 
<form id="teamfilter" action=""> 
<input type="checkbox" name="team" value="TeamA"/>TeamA </br> 
<input type="checkbox" name="team" value="TeamB"/>TeamB </br> 
<input type="checkbox" name="team" value="TeamC"/>TeamC </br> 
<input type="checkbox" name="team" value="TeamD"/>TeamD </br> 
</form> 

我發現這個過濾器的工作原理是我想要的。在控制檯替換隱藏與顯示和品牌2 Brand2，TeamA等工作得很好。

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1)") 
).hide(); 

下一個步驟是獲得一個雙過濾器的工作原理，以及：

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1):contains(TeamA)") 
).hide(); 

我對得到這個工作的問題是雙重的。 1正在用變量（因此是formids）取代Brand1/Team A。

第二個嘗試在單擊複選框時運行腳本。它應該工作，如果任何一個被點擊，如果兩者都被點擊（這意味着上面的腳本需要通過顯示全部然後隱藏來重置）。

目前啓動它我運行這個腳本，但我遇到了問題，所以我已經回到只有1個過濾器。

$("input:checkbox[name='brand']").click(function() { 
    var brandfilter = $(this).val(); 
    alert (brandfilter); 
    $("#CategoryContent li:contains(' + brandfilter + ')").parent().hide(); 
}); 

彈出的警告就是我想要的（即Brand1），但隱藏功能後不工作，當我再次alert (brandfilter)在控制檯再次我得到[object HTMLFormElement]。所以我認爲這個變量沒有正確存儲或者什麼東西？

下面是簡單的工作基本腳本http://jsfiddle.net/7gYJc/

Answer 1

假設你想顯示匹配任何目前勾選框哪些項目，您可以使用此：

$('input:checkbox').change(showHideProducts); 

function showHideProducts() 
{ 
    var checked = $('input:checked'); 
    var products = $('.product'); 

    // If all the boxes are unchecked, show all the products. 
    if (checked.length == 0) 
    { 
     products.show(); 
    } 
    else 
    { 
     products.hide(); 
     checked.each 
     (
      function() 
      { 
       $('.product:contains("' + $(this).val() + '")').show(); 
      }    
     ); 
    } 
}​ 

編輯：既然你要當什麼也沒被選中所有的箱子顯示，只是如果添加（長度= 0）檢查並顯示所有內容（參見上文）。

Answer 2

我不能告訴是哪裏的問題，但你可以嘗試使用filter()代替:contains選擇。使用filter()，您可以創建自己的自定義過濾規則，因爲它需要一個函數作爲參數。

var myProducts = function (brand, team) { 

    brand = brand || ''; 
    team = team || ''; 

    return $('.product').filter(function() { 
     var re = new RegExp(brand + '.+' + team, 'i'); 
     return re.test($(this).text()); 
    }); 

}; 

myProducts('Brand1', 'TeamA').hide(); 
myProducts('Brand2').hide(); 

例子：http://jsfiddle.net/elclanrs/hYZcW/

Answer 3

我想出了以下方法：

開始檢查所有的複選框，因爲你要顯示所有產品。如果用戶剔除複選框，則應該隱藏與該品牌/團隊匹配的產品。

這裏是我的代碼有：

var $filters = $("input:checkbox[name='brand'],input:checkbox[name=team]").prop('checked', true); // start all checked 
var $categoryContent = $('#CategoryContent li'); // cache this selector 
$filters.click(function() { 
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest. 
    $categoryContent.hide(); 
    $filters.filter(':checked').each(function(i, el) { 
     $categoryContent.filter(':contains(' + el.value + ')').show(); 
    }); 
});​ 

jsFiddle link。

Answer 4

本週我有同樣的問題與多個選擇。選擇器工作正常，但隱藏不起作用。我能夠解決它使用

.css('visibility', 'hidden'); // instead of .hide() and 
.css('visibility', ''); // instead of .show() 

我不明白它，但它的工作。