0
我遇到了一个问题,如果我以前选择了一个排序值,我无法过滤。我只想对可见项目进行排序,但是当我选择其他筛选器选项时,筛选器不会更新。任何建议将不胜感激。非常感谢你jQuery排序和筛选器列表
这里是我的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
FIDDLE:https://fiddle.jshell.net/tLLfkg5w/
嗨MJH,感谢您的回答。我更新了我的小提琴,但我遇到的问题(您可以在小提琴中看到它)是在加载过滤器和排序选项时工作正常,如果您不切换过滤器编号(1,2,3,4 - in我的小提琴我只添加内容到选项1和2)。它可以工作,如果你只是把排序选项作为最流行的方式,但是如果你通过点击其他两个中的任何一个进行排序,然后去筛选编号2,它什么也不显示。我不确定我的脚本有什么问题。你可以帮我吗?非常感谢你https://fiddle.jshell.net/obnbjf3t/ – tiffsaw
谢谢你的回答。我以前曾尝试过,但问题在于它不仅仅对已过滤的列表进行排序,而且对整个列表进行排序,这意味着排序时顺序不正确。你可以在这个小提琴上看到它,我添加了更多选项,并且它排序不正确。你有什么其他的建议?我想对可见的过滤列表进行排序,当点击另一个过滤器时,它会显示具有指定排序的特定列表。 https://fiddle.jshell.net/9qe0z9mb/我真的很感谢你的帮助 – tiffsaw
请看我重新修改的答案。 – MJH