【发布时间】：2015-12-01 03:42:02
【问题描述】：
我试图通过用 data-* 属性装饰一些“卡片”来进行一些客户端过滤以进行过滤。我有一些成功和一些失败:)
我在以下位置创建了一个小提琴：
这是一个现有项目中的工作，我已经删除了相当多的代码来将其简化为一个简单的演示。
简而言之，我循环遍历每张卡片，将 data-* 属性提取到变量中，然后循环遍历选定的过滤器。然后，我对 data-* 属性和过滤器值进行比较，并在适当的情况下设置匹配标志。然后驱动每张卡的显示状态。
我似乎撞墙的地方在小提琴 JS 窗格的第 56 行附近。这是带有两行 cmets 的 else 条件。基本上，如果我包含该代码分支，则过滤器可以在每个过滤器方面/类别中使用一个过滤器选择。如果我注释掉 else 代码，则过滤器适用于同一过滤器方面/类别中的多个选择。
我想要完成的是将卡片过滤到过滤器中检查的任何内容。如果我选择“gold, $2,001-$4,000, CCN”，我只想查看任何具有相应 data-* 属性的卡片。我不想看到“2,001-400 美元的白银”或“青铜 CCN”卡。
我想知道是否有人对如何将适当的过滤应用于我的小提琴有任何想法。
这也是小提琴的代码，虽然小提琴可能更容易使用：
<!--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>
【问题讨论】：
标签： javascript jquery checkbox filter filtering