おそらくもっと簡単な方法がありますが、私はjQueryにかなり慣れていないので、ご容赦ください...基本的に、選択したチェックボックスのすべての値を含む配列を作成し、含まないdivを非表示にしようとしていますそれらの値のすべて。以下は、私がやろうとしていることを説明するのに役立つ、大まかなマークアップです。
/*** Sample Markup ***/
<div id="item-wrapper">
<div class="blue red green ivory">Item 32323</div>
<div class="green red">Item 34234</div>
<div class="ivory blue green">Item 39403</div>
<div class="red blue">Item 39923</div>
<div class="green">Item 32990</div>
</div>
<input type="checkbox" class="checkbox-filter" name="filter[]" value="red" CHECKED />RED
<input type="checkbox" class="checkbox-filter" name="filter[]" value="ivory" />IVORY
<input type="checkbox" class="checkbox-filter" name="filter[]" value="blue" CHECKED />BLUE
<input type="checkbox" class="checkbox-filter" name="filter[]" value="green" />GREEN
この例では、「RED」と「BLUE」のチェックボックスがチェックされています。赤と青の両方を含まない div#item-wrapper 内のすべての div を見つけて非表示にしたいと思います。したがって、結果は次のようになります。
<div id="item-wrapper">
<div class="blue red green ivory">Item 32323</div>
<div class="green red">Item 34234</div>
<div class="ivory blue green" style="display:none">Item 39403</div>
<div class="red blue">Item 39923</div>
<div class="green" style="display:none">Item 32990</div>
</div>
配列を比較したり、配列を反復処理したりする方法について読んできましたが、これまでのところ、解決策を見つけることができませんでした。率直に言って、私がここでやろうとしていることをカプセル化するために何を検索すべきかについて完全には明確ではないので、ここの誰かが助けてくれることを願っています.
以下は、何かを機能させようとする非常に下手な試みですが、まったく役に立たない可能性があります...
var selectedFilters = [];
$('input.checkbox-filter').live('click',function() {
$('input.checkbox-filter').each(function() {
if($(this).is(':checked')) {
selectedFilters.push($(this).val());
}
});
$('#item-wrapper div').each(function() {
var str = $(this).attr('class').split(' ');
/*** And, this is where I got lost ***/
});
});