通过多个类别过滤Jquery的逻辑
通过多个类别过滤Jquery的逻辑
提问于 2015-01-19 09:39:41
我无法理解这里的逻辑。
我的JQuery：
<script>
$(document).ready(function () {
$('div.filter-groups').find('input:checkbox').live('click', function () {
$('.general').hide();
$('div.filter-groups').find('input:checked').each(function () {
$('.general').hide();
$('div.general.' + $(this).attr('rel')).show();
});
});
});</script>我的复选框：
<div class="filter-groups">
<div class="filter-label">Price:</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Tier1">$100,000-$160,000</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Tier2">$160,000-$200,000</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Tier3">$200,000-$250,000</div>
<div class="filter-label">Number Of Rooms:</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Rooms3">3 Bedroom</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Rooms4">4 Bedroom</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Rooms5">5 Bedroom</div>
<div class="filter-label">Square Footage:</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Foot1">1,200-1,600</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Foot2">1,600-2,000</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Foot3">2,000+</div>
<div class="filter-label">Neighborhoods:</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="CityView">City View</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="HeritageHills">Heritage Hills</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="HillsideTerrace">Hillside Terrace</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="LonesomeDove">Lonesome Dove</div>
<div class="filter"><input type="checkbox" name="price" value="" rel="Tradewinds">Tradewinds</div>
</div>脚本的工作原理是，如果单击复选框，它将显示包含与该复选框的"rel=“匹配的类的div。
这是可行的，但如果我检查第一个价格过滤器和第一个邻里过滤器，它将显示在那个社区的家，即使它属于第二个价格过滤器。
我需要这个脚本在显示结果时考虑到所有的过滤器部分。这个问题已经问过几次了，但他们用不同的方法提出建议吗？
无法让我的工作代码工作的地方：http://jsfiddle.net/jonathanSumner90/nh8vr1kp/
它工作的网页，但不是我试图在这里找出的方式：
回答 1
Stack Overflow用户
发布于 2015-01-19 10:51:22
已经有一个名为.filter() in jQuery的内置函数，它可以实现您想要实现的功能。
var checkboxes = $('div.filter-groups').find('input:checkbox'),
general = $('.general');
function filterCheckboxes(ev){
var rel = $(ev.currentTarget).attr('rel');
general.hide().filter('.' + rel).show();
}
checkboxes.on('click', filterCheckboxes);要解决多个复选框问题，可以在所有的:checked中筛选checkboxes状态，并为每个rel应用筛选器。
function filterCheckboxes(){
var checked = checkboxes.filter(':checked');
general.hide();
$.each(checked, function(){
var rel = $(this).attr('rel');
general.filter('.' + rel).show();
});
}希望这是意料之中的。
建议:使用data-属性而不是rel来更有表现力和/或在单个复选框上组合多个筛选器。
html
<input type="checkbox" name="price" value="" data-filter="Tier1" />js
var rel = $(this).data('filter');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28030528
复制相关文章
相似问题
腾讯云开发者
