JQuery排序和过滤列表

JQuery sort and filter list

本文关键字：列表 过滤 排序 JQuery      更新时间：2023-09-26

我遇到了一个问题，如果我以前选择了一个排序值，我无法过滤。我只想对可见的项目进行排序，但当我选择不同的筛选选项时，筛选器不会更新。任何建议都将非常感谢。非常感谢

这是我的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/

除非我还是误解了你，否则问题似乎是这一行:

var $filterList = $('.js-filter-results-plans:visible');


当应用"1"或"2"过滤器时，:visible确保$filterList开始时只包含两个元素，而我相信您希望它包含所有四个元素。因此，在下面的代码片段中，我删除了:visible:

var $filterList = $('.js-filter-results-plans');


更新:我本来想提到parseInt的，但是你抢先了一步。除此之外，排序不正确不是由于缺少:visible，而是由于您的数值排序中return行不正确。请参阅下面修改后的代码片段。再次，请让我知道，如果片段提供所需的行为。

// 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 -->

相关文章：