复选框过滤器用于显示/隐藏用多个data-*属性装饰的元素
Checkbox filter to show/hide elements decorated with multiple data-* attributes
我正试图通过用data-*属性装饰一些"卡片"来过滤一些客户端过滤。我有成功也有失败:)
我创建了一个小提琴:
http://jsfiddle.net/nayabq1u/这是一个现有项目的工作，我已经剥离了相当多的代码，使其成为一个基本的演示。
简而言之，我循环遍历每张卡片，将data-*属性提取到变量中，然后循环遍历选定的过滤器。然后对data-*属性和过滤器值进行比较，并在适当的情况下设置一个匹配的标志。然后驱动每个卡的显示状态。
我似乎是碰壁的地方是在第56行左右的小提琴JS窗格。它是带有两行注释的else条件。基本上，如果我包含该代码分支，则过滤器在每个过滤器方面/类别中使用一个过滤器选择。如果我注释掉else代码，过滤器将在相同的过滤器facet/类别中处理多个选择。
我想要完成的是将卡片过滤到过滤器中检查过的任何内容。如果我选择"gold， $2,001-$4,000, CCN"，我只想看到任何具有相应data-*属性的卡。我不想看到"银卡$2,001-$400"或"铜卡"。
我想知道是否有人有任何关于如何得到适当的过滤应用到我的小提琴的想法。
下面是来自fiddle的代码，尽管fiddle可能更容易使用:
<!--metallic level-->
<fieldset>
<p>metal</p>
<ol>
<li>
<label for="metallic1">
<input type="checkbox" value="platinum" id="metallic1" name="checkbox" data-filter-facet="metallic">
<span>Platinum</span>
</label>
</li>
<li>
<label for="metallic2">
<input type="checkbox" value="gold" id="metallic2" name="checkbox" data-filter-facet="metallic">
<span>Gold</span>
</label>
</li>
<li>
<label for="metallic3">
<input type="checkbox" value="silver" id="metallic3" name="checkbox" data-filter-facet="metallic">
<span>Silver</span>
</label>
</li>
<li>
<label for="metallic4">
<input type="checkbox" value="bronze" id="metallic4" name="checkbox" data-filter-facet="metallic">
<span>Bronze</span>
</label>
</li>
<li>
<label for="metallic5">
<input type="checkbox" value="catastrophic" id="metallic5" name="checkbox" data-filter-facet="metallic">
<span>Catastrophic</span>
</label>
</li>
</ol>
</fieldset>
<!--deductible-->
<fieldset>
<p>deductible</p>
<ol>
<li>
<label for="deductible1">
<input type="checkbox" value="deductible0-2" id="deductible1" name="checkbox" data-filter-facet="deductible">
<span>$0 - $2,000</span>
</label>
</li>
<li>
<label for="deductible2">
<input type="checkbox" value="deductible2-4" id="deductible2" name="checkbox" data-filter-facet="deductible">
<span>$2,001 - $4,000</span>
</label>
</li>
<li>
<label for="deductible3">
<input type="checkbox" value="deductible4+" id="deductible3" name="checkbox" data-filter-facet="deductible">
<span>$4,001+</span>
</label>
</li>
</ol>
</fieldset>
<!--network-->
<fieldset>
<p>network</p>
<ol>
<li>
<label for="network1">
<input type="checkbox" value="beacon" id="network1" name="checkbox" data-filter-facet="network">
<span>Beacon</span>
</label>
</li>
<li>
<label for="network2">
<input type="checkbox" value="ccn" id="network2" name="checkbox" data-filter-facet="network">
<span>CCN</span>
</label>
</li>
<li>
<label for="network3">
<input type="checkbox" value="rosecity" id="network3" name="checkbox" data-filter-facet="network">
<span>Rose City</span>
</label>
</li>
</ol>
</fieldset>
<!--features-->
<fieldset>
<p>features</p>
<ol>
<li>
<label for="features1">
<input type="checkbox" value="alternativecare" id="features1" name="checkbox" data-filter-facet="features">
<span>Alternative care</span>
</label>
</li>
<li>
<label for="features2">
<input type="checkbox" value="healthsavingsaccount" id="features2" name="checkbox" data-filter-facet="features">
<span>Health savings account</span>
</label>
</li>
<li>
<label for="features3">
<input type="checkbox" value="pediatricdental" id="features3" name="checkbox" data-filter-facet="features">
<span>Pediatric dental</span>
</label>
</li>
</ol>
</fieldset>
</div>
<hr>
<p class="bold">
<span class="plan-count" style="color:red;">count</span> plans available
</p>
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="gold"
data-filter-deductible="deductible0-2"
data-filter-network="rosecity"
data-filter-features="alternativecare">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="gold"
data-filter-deductible="deductible0-2"
data-filter-network="rosecity"
data-filter-features="alternativecare"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="silver"
data-filter-deductible="deductible0-2"
data-filter-network="ccn"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="silver"
data-filter-deductible="deductible0-2"
data-filter-network="ccn"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="bronze"
data-filter-deductible="deductible4+"
data-filter-network="rosecity"
data-filter-features="pediatricdental">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="bronze"
data-filter-deductible="deductible4+"
data-filter-network="rosecity"
data-filter-features="pediatricdental"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="platinum"
data-filter-deductible="deductible0-2"
data-filter-network="beacon"
data-filter-features="alternativecare">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="platinum"
data-filter-deductible="deductible0-2"
data-filter-network="beacon"
data-filter-features="alternativecare"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="gold"
data-filter-deductible="deductible2-4"
data-filter-network="ccn"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="gold"
data-filter-deductible="deductible2-4"
data-filter-network="ccn"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="silver"
data-filter-deductible="deductible2-4"
data-filter-network="rosecity"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="silver"
data-filter-deductible="deductible2-4"
data-filter-network="rosecity"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="silver"
data-filter-deductible="deductible4+"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="silver"
data-filter-deductible="deductible4+"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="bronze"
data-filter-deductible="deductible0-2"
data-filter-network="rosecity"
data-filter-features="alternativecare">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="bronze"
data-filter-deductible="deductible0-2"
data-filter-network="rosecity"
data-filter-features="alternativecare"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="platinum"
data-filter-deductible="deductible0-2"
data-filter-network="ccn"
data-filter-features="alternativecare">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="platinum"
data-filter-deductible="deductible0-2"
data-filter-network="ccn"
data-filter-features="alternativecare"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="platinum"
data-filter-deductible="deductible2-4"
data-filter-network="beacon"
data-filter-features="alternativecare">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="platinum"
data-filter-deductible="deductible2-4"
data-filter-network="beacon"
data-filter-features="alternativecare"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="gold"
data-filter-deductible="deductible2-4"
data-filter-network="ccn"
data-filter-features="pediatricdental">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="gold"
data-filter-deductible="deductible2-4"
data-filter-network="ccn"
data-filter-features="pediatricdental"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="silver"
data-filter-deductible="deductible4+"
data-filter-network="ccn"
data-filter-features="pediatricdental">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="silver"
data-filter-deductible="deductible4+"
data-filter-network="ccn"
data-filter-features="pediatricdental"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="silver"
data-filter-deductible="deductible0-2"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="silver"
data-filter-deductible="deductible0-2"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<!--start plan card-->
<div class="plan-card mobile-card"
data-filter-metal="bronze"
data-filter-deductible="deductible4+"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount">
<div class="row card-padding">
<div class="row">
<div class="twelve columns">
<p>sample decorated plan card with attributes to filter on</p>
<pre>
data-filter-metal="bronze"
data-filter-deductible="deductible4+"
data-filter-network="beacon"
data-filter-features="healthsavingsaccount"
</pre>
</div>
</div>
</div>
</div>
<!--end plan-card-->
<style>
.plan-card {
background: #f0edeb;
margin: 1.5em 0 0;
padding: 0;
}
.no-display {
display: none;
}
fieldset {
float: left;
width: auto;
padding: 0;
margin: 0 10px 0 0;
border: none;
}
ol {
list-style: none;
margin:0;
padding: 0;
}
</style>
<script>
var PLANCARDFILTER = {};
PLANCARDFILTER.plan_card = $('.plan-card');
PLANCARDFILTER.count = 0;
PLANCARDFILTER.plan_match_count = 0;
//active filters checked, used to display appropriate plan cards
PLANCARDFILTER.filters = [];
PLANCARDFILTER.FilterChange = function() {
var value = $(this).val(),
facet = $(this).data('filterFacet');
//keep track of what filters are checked
if (this.checked) {
PLANCARDFILTER.count = PLANCARDFILTER.count + 1;
PLANCARDFILTER.filters.push(value);
} else {
PLANCARDFILTER.count = PLANCARDFILTER.count - 1;
PLANCARDFILTER.filters.splice(PLANCARDFILTER.filters.indexOf(value), 1);
}
PLANCARDFILTER.FilterPlanCards();
};
PLANCARDFILTER.FilterPlanCards = function() {
PLANCARDFILTER.plan_match_count = 0;
//if nothing checked, show all plans
if (PLANCARDFILTER.count === 0) {
PLANCARDFILTER.plan_card.removeClass('no-display');
return;
}
//intially hide all plan cards
PLANCARDFILTER.plan_card.addClass('no-display');
//show plan cards based on what filters are checked
PLANCARDFILTER.plan_card.each(function(index, elem) {
var filter_metal = $(elem).data('filterMetal'),
filter_deductible = $(elem).data('filterDeductible'),
filter_network = $(elem).data('filterNetwork'),
filter_features = $(elem).data('filterFeatures'),
matched = false;
for (var i=0, len=PLANCARDFILTER.filters.length; i<len; i++) {
if (filter_metal.indexOf(PLANCARDFILTER.filters[i]) > - 1) {
matched = true;
} else if (filter_deductible.indexOf(PLANCARDFILTER.filters[i]) > - 1) {
matched = true;
} else if (filter_network.indexOf(PLANCARDFILTER.filters[i]) > - 1) {
matched = true;
} else if (filter_features.indexOf(PLANCARDFILTER.filters[i]) > - 1) {
matched = true;
} else {
//with this included, filter works with *one* selection max across each filter facet
//when commented out, filter works with multiple selections within same filter facet
matched = false;
break;
}
}
if (matched) {
$(elem).removeClass('no-display');
PLANCARDFILTER.plan_match_count = PLANCARDFILTER.plan_match_count + 1;
} else {
$(elem).addClass('no-display');
}
//stubbed in functionality for this
$('.plan-count').text(PLANCARDFILTER.plan_match_count);
});
};
PLANCARDFILTER.Initialize = function() {
$('.plans-filter').on('change', 'input:checkbox', PLANCARDFILTER.FilterChange);
};
PLANCARDFILTER.Initialize();
</script>
我不确定我能回答你的问题。但我的建议是不要重新发明轮子。有很多用于过滤和排序div的jquery插件。我用流沙。它使用数据属性就是为了这个目的。它很容易使用，效果也很好。你可以在这里找到:
http://razorjack.net/quicksand/相关文章：
- jQuery可以't获取data-*属性值，返回undefined
- 如何获取`data-listid`属性值
- 为什么toStaticHTML删除data-*属性
- 访问HTML中的data-*属性并将其作为道具传递
- Ext.data.NodeInterface已禁用属性
- Jquery将data-rel属性添加到所有输入字段，并移除name属性
- 属性来检索和设置Text节点值:data或nodeValue
- 当通过Jquery data(）附加时，以及当直接通过HTML中的数据属性附加时，检查HTML元素中的数据(）
- 如何使用jQuery选择具有特定data-属性的元素?价值无关紧要
- Javascript个性测试使用'这'和data-*属性
- 使用script元素上的html data-*属性来配置引用的脚本文件
- 将Data属性添加到元素，并从字符串中动态添加值
- 追加并替换data-*属性URL的查询字符串值
- 将变量从data属性传递给onclick函数
- “data-”属性作为超链接的一部分.HTML 到 JavaScript
- 不能读取属性'data'Angularjs-无法从模板读取数据到控制器)
- 如何接受HTML属性data-*， aria-*
- 更新li元素的属性data-id
- 不能获取具有特定id的元素作为属性'data-parent'
- 如何将json格式设置为html5属性"data-settings"
