jQuery排序和过滤器列表 [英] JQuery sort and filter list
本文介绍了jQuery排序和过滤器列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了一个问题，如果我以前选择了排序值，则无法过滤.我只想对可见项进行排序，但是当我选择其他过滤器选项时，过滤器不会更新.任何建议将不胜感激.非常感谢
I'm running into an issue where I'm unable to filter if I previously selected a sort value. I only want to sort the visible items but when I select a different filter option, the filter doesn't update. Any suggestions would be greatly appreciated. thank you so much
这是我的js:
// Filtering plans options
$('.js-filter-options li a').click(function() {
// looks for the class of the clicked options
var allPlans = $(this).attr('class');
// reset the active class on all the options
$('.js-filter-options li, .js-input-check').removeClass('active');
// update the active state on clicked option
$(this).parent().addClass('active');
$(this).children().toggleClass('active');
if(allPlans == 'js-all-plans') {
// show all the plans
$('.js-filter-results').find('section.js-filter-results-plans').show();
}
else {
// hide plans that don't match class
$('.js-filter-results').find('section:not(.' + allPlans + ')').hide();
// show plans that are match class
$('.js-filter-results').find('section.' + allPlans).show();
}
});//end
//Dropdown options filtering
$('.js-dropdown-filter').change(function() {
var $filterList = $('.js-filter-results-plans:visible');
// Do something for option price lowest to highest
if ($(this).val() === 'low-high') {
var lowHigh = $filterList.sort(function (a, b) {
return $(a).find('.price__amount').text() > $(b).find('.price__amount').text();
});
$('.js-filter-results').html(lowHigh);
}
// Do something for option price highest to lowest
else if ($(this).val() === 'high-low') {
var highLow = $filterList.sort(function (a, b) {
return $(a).find('.price__amount').text() < $(b).find('.price__amount').text();
});
$('.js-filter-results').html(highLow);
}
// Do something for option popular
else {
var popular = $filterList.sort(function (a, b) {
return $(a).data("order")-$(b).data("order");
});
$('.js-filter-results').html(popular);
}
});//end
字段: https://fiddle.jshell.net/tLLfkg5w/
推荐答案
除非我仍然对您有误解，问题似乎出在此行:
Unless I am still misunderstanding you, the problem seems to be this line:
var $filterList = $('.js-filter-results-plans:visible');
当您应用"1"或"2"过滤器时，:visible确保$filterList开始时仅包含两个元素，而我相信您希望它包含所有四个元素.因此，在下面的代码段中，我删除了:visible:
When your "1" or "2" filter is applied, :visible ensures that $filterList starts out containing only two elements, when I believe you want it to contain all four of the elements. So, in the snippet below, I removed :visible:
var $filterList = $('.js-filter-results-plans');
更新:我要提到parseInt，但是您击败了我.除此之外，不正确的排序不是由于缺少:visible引起的，而是由于数字排序中的return行是错误的事实引起的.请参见下面的修改后的代码段.同样，请让我知道代码段是否提供了所需的行为.
UPDATE: I was going to mention parseInt, but you beat me to it. Apart from that, the improper sorting is not caused by the lack of :visible, it's caused by the fact that the return lines in your numerical sorts are incorrect. See the modified snippet below. Again, please let me know if the snippet gives the desired behavior.
// Filtering plans options
$('.js-filter-options li a').click(function() {
// looks for the class of the clicked options
var allPlans = $(this).attr('class');
// reset the active class on all the options
$('.js-filter-options li, .js-input-check').removeClass('active');
// update the active state on clicked option
$(this).parent().addClass('active');
$(this).children().toggleClass('active');
if(allPlans == 'js-all-plans') {
// show all the plans
$('.js-filter-results').find('section.js-filter-results-plans').show();
}
else {
// hide plans that don't match class
$('.js-filter-results').find('section:not(.' + allPlans + ')').hide();
// show plans that are match class
$('.js-filter-results').find('section.' + allPlans).show();
}
});//end
//Dropdown options filtering
$('.js-dropdown-filter').change(function() {
// var $filterList = $('.js-filter-results-plans:visible');
var $filterList = $('.js-filter-results-plans');
// Do something for option price lowest to highest
if ($(this).val() === 'low-high') {
var lowHigh = $filterList.sort(function (a, b) {
return parseInt($(a).find('.price__amount').text()) - parseInt($(b).find('.price__amount').text());
});
$('.js-filter-results').html(lowHigh);
}
// Do something for option price highest to lowest
else if ($(this).val() === 'high-low') {
var highLow = $filterList.sort(function (a, b) {
return parseInt($(b).find('.price__amount').text()) - parseInt($(a).find('.price__amount').text());
});
$('.js-filter-results').html(highLow);
}
// Do something for option popular
else {
var popular = $filterList.sort(function (a, b) {
return $(a).data("order")-$(b).data("order");
});
$('.js-filter-results').html(popular);
}
});//end
.h-hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="js-filter-options">
<li><a href="#" class="js-1-plan">1</a></li>
<li><a href="#" class="js-2-plan">2</a></li>
<li><a href="#" class="js-3-plan">3</a></li>
<li><a href="#" class="js-4-plan">4</a></li>
</ul><!--/.js-filter-options -->
<select class="js-dropdown-filter">
<option value="popular">Popular</option>
<option value="high-low">Price Highest to Lowest</option>
<option value="low-high">Price Lowest to Highest</option>
</select><!--/.js-dropdown-filter -->
<section class="js-filter-results">
<section class="js-filter-results-plans js-1-plan" data-order="1">
<div class="price">
<span class="price__amount">24</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-1-plan" data-order="2">
<div class="price">
<span class="price__amount">34</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-1-plan" data-order="3">
<div class="price">
<span class="price__amount">33</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-1-plan" data-order="4">
<div class="price">
<span class="price__amount">92</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-2-plan h-hidden" data-order="1">
<div class="price">
<span class="price__amount">44</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-2-plan h-hidden" data-order="2">
<div class="price">
<span class="price__amount">55</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-3-plan h-hidden" data-order="1">
<div class="price">
<span class="price__amount">66</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-3-plan h-hidden" data-order="2">
<div class="price">
<span class="price__amount">42</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-3-plan h-hidden" data-order="3">
<div class="price">
<span class="price__amount">109</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-3-plan h-hidden" data-order="3">
<div class="price">
<span class="price__amount">57</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-4-plan h-hidden" data-order="1">
<div class="price">
<span class="price__amount">19</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
<section class="js-filter-results-plans js-4-plan h-hidden" data-order="2">
<div class="price">
<span class="price__amount">11</span>
</div><!--/.price -->
</section><!--/.js-filter-results-plans -->
</section><!--/.js-filter-results -->
这篇关于jQuery排序和过滤器列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
