2016-09-29 91 views
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/

回答

0

除非我仍然誤解你,這個問題似乎是這一行:

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

+0

嗨MJH,感謝您的回答。我更新了我的小提琴,但我遇到的問題(您可以在小提琴中看到它)是在加載過濾器和排序選項時工作正常,如果您不切換過濾器編號(1,2,3,4 - in我的小提琴我只添加內容到選項1和2)。它可以工作,如果你只是把排序選項作爲最流行的方式,但是如果你通過點擊其他兩個中的任何一個進行排序,然後去篩選編號2,它什麼也不顯示。我不確定我的腳本有什麼問題。你可以幫我嗎?非常感謝你https://fiddle.jshell.net/obnbjf3t/ – tiffsaw

+0

謝謝你的回答。我以前曾嘗試過,但問題在於它不僅僅對已過濾的列表進行排序,而且對整個列表進行排序,這意味着排序時順序不正確。你可以在這個小提琴上看到它,我添加了更多選項,並且它排序不正確。你有什麼其他的建議?我想對可見的過濾列表進行排序,當點擊另一個過濾器時,它會顯示具有指定排序的特定列表。 https://fiddle.jshell.net/9qe0z9mb/我真的很感謝你的幫助 – tiffsaw

+0

請看我重新修改的答案。 – MJH