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

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>

我發現該過濾器可以根據需要工作。 在控制台中，將show替換為hide，將Brand1替換為Brand1，將TeamA等工作正常。

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

下一步是獲得一個效果很好的雙重過濾器：

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

我的工作方式有兩個問題。 1正在用變量替換Brand1 / Team A（因此很困難）。

第二種是嘗試在單擊復選框時運行腳本。 如果單擊任意一個並且單擊兩個都單擊，則它應該起作用（這意味着使用上面的腳本，需要先顯示所有腳本然后隱藏，然后重新設置）。

目前，要啟動它，我正在運行此腳本，但是遇到了問題，因此我只返回了1個過濾器。

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

彈出的警報是我想要的（即Brand1），但是此后的hide函數不起作用，當我再次在控制台中再次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();
            }            
        );
    }
}​

編輯：由於您希望所有框顯示時未選中任何內容，因此只需添加一個if（length = 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鏈接 。

Answer 4

我本周有多種選擇遇到同樣的問題。 選擇器工作正常，但隱藏無效。 我能夠使用解決

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

我不明白，但是確實有效。