jQueryプロダクトフィルタとチェックボックスを使用：contains（）show/hide

Question

カテゴリのすべての商品を1ページに一覧表示するストア用のシンプルなjQuery製品フィルタをまとめようとしています。これは、AJAXを通じてストアが設定されているために達成できません。

簡単に言えば、カテゴリのすべての商品は1ページにあります。彼らは様々なブランドの製品名とチーム名を持っています。マークアップは次のようになります（最後のフォームはフィルタの実行方法です）。

<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> 

このフィルタは、私が望むように動作することがわかりました。コンソールでhideをshowと置き換え、Brand1をBrand2、TeamAなどでうまく動作させます。

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

次のステップは、同様に動作し、二重フィルターなっている。この作業を取得して

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

私の問題は、2倍です。 1はBrand1/Team Aを変数に置き換えています（したがって、formids）。

2番目は、チェックボックスをクリックしたときにスクリプトを実行しようとしています。どちらか一方がクリックされ、両方がクリックされた場合（上のスクリプトでは、すべてを表示して非表示にしてリセットする必要があることを意味します）

私はこのスクリプトを実行していますが、私は問題にぶつかっているので、ただ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(); 
      }    
     ); 
    } 
}​ 

EDIT：あなたはすべてのボックスには何も確認されていないときに表示したいのでが、ちょうどあれば追加します（長さ= 0）チェックしてそこのすべてを表示します（上記参照）。

Answer 2

問題がどこにあるか私が言うことはできませんが、あなたの代わりに:containsセレクタのfilter()を使用して試すことができます。 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

今週は、複数選択で同じ種類の問題が発生しました。セレクタは正常に動作しましたが、hideは動作しませんでした。

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

私はそれを理解することができませんでしたが、それは解決しました。