我试图通过装饰一些＆＃34;卡来尝试进行客户端过滤。使用data- *属性进行过滤。我有一些成功和一些失败：）
我在：
创造了一个小提琴这是在现有项目中的工作，我已经删除了相当多的代码，以便将其归结为一个简单的演示。
简而言之，我循环遍历每张卡片，将data- *属性提取到变量中，然后循环选定的过滤器。然后，我对data- *属性和过滤器值进行比较，并在适当时设置匹配的标志。然后驱动每张卡的显示状态。
在小提琴JS窗格的第56行附近，我似乎正在撞墙。它有两行评论的其他条件。基本上，如果我包含该代码分支，则过滤器在每个过滤器构面/类别中使用一个过滤器选择。如果我注释掉else代码，则过滤器在同一过滤器构面/类别中使用多个选择。
我想要完成的是将卡片过滤掉过滤器中检查的内容。如果我选择＆＃34;黄金，$ 2,001- $ 4,000，CCN＆＃34;我只想看到任何具有相应data- *属性的卡片。我不想看到银币2,001美元到400美元＆＃34;或者是一个青铜CCN＆＃34;卡。
我想知道是否有人对如何将适当的过滤应用于我的小提琴有任何想法。
这里也是小提琴的代码，虽然小提琴可能更容易使用：
<!--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>
答案 0 :(得分：0)
我不确定我能按照问题的方式回答你的问题。但我的建议是不要重新发明轮子。有很多用于过滤和排序div的jquery插件。我用的是流沙。它仅为此目的使用数据属性。它易于使用且工作精美。你可以在这里找到它：