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