JQuery排序和筛选器列表

Question

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

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

Answer 1

除非我仍然误解你，否则问题似乎就在这一行：

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

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

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

更新：我要提到parseInt，但你打败了我。除此之外，不正确的排序不是由于:visible的缺失引起的，而是由于数字排序中的return行不正确而引起的。请参阅下面的修改后的代码段。如果代码段提供了所需的行为，请再次告诉我。

＆＃13;

＆＃13;

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

＆＃13;

.h-hidden {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;