年齢間のjQueryフィルタリングの年齢

Question

どのように人々は年齢の間にフィルタをかけることができますか？だから、私はselectboxを使うことができ、18〜25、26〜35の間のeverywoneなどを表示しますか？

jQuery("select.filterby").change(function() { 
    var filters = jQuery.map(jQuery("select.filterby").toArray(), function(e) { 
     return jQuery(e).val(); 
    }).join("."); 
    jQuery("div#holder-box").find(".box").hide(0); 
    jQuery("div#holder-box").find(".box." + filters).show(0) 
}); 

とHTMLは次のようである：コードで

<select class="filterby"> 
    <option value="all">All ages</option> 
    <option value="18-25">18 to 25</option> 
    <option value="25-35">26 to 35</option> 
    <option value="36-45">36 to 45</option> 
    <option value="46-55">46 to 55</option> 
    <option value="56-65">56 to 65</option> 
</select> 

<select class="filterby"> 
    <option value="all">Show all</option> 
    <option value="glasses">Glasses</option> 
    <option value="sunglasses">Sunglasses</option> 
</select> 

<select class="filterby"> 
    <option value="all">Eyes</option> 
    <option value="blue">Blue</option> 
    <option value="brown">Brown</option> 
    <option value="green">Green</option> 
    <option value="grey">Grey</option> 
</select> 

<div id="holder-box"> 
    <div class="box all 18 blue glasses"></div> 
    <div class="box all 37 green sunglasses"></div> 
    <div class="box all 55 grey glasses"></div> 
    <div class="box all 22 brown sunglasses"></div> 
    <div class="box all 47 blue glasses"></div> 
</div> 

Answer 1

更新：

jQuery("select.filterby").change(function() { 
 
    var filters = jQuery.map(jQuery("select.filterby").not(".age").toArray(), function(e) { 
 
     return jQuery(e).val(); 
 
    }).join("."); 
 
\t 
 
\t var $selectedDivs = jQuery(document).find(".box." + filters); 
 
\t $selectedDivs = filterByAge($selectedDivs); 
 
    jQuery(document).find(".box").hide(0); 
 
    $selectedDivs.show(0) 
 
}); 
 

 
function filterByAge(objectToFilter){ 
 
\t var value = jQuery("select.filterby.age").val(); 
 
\t if(value == "all"){ 
 
\t \t return objectToFilter; 
 
\t } 
 
\t var minMax = value.split("-"); 
 
\t var min = minMax[0]; 
 
\t var max = minMax[1]; 
 
\t 
 
\t return objectToFilter.filter(function(){ 
 
\t \t var age = jQuery(this).data("age"); 
 
\t \t return age >= min && age < max; 
 
\t }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<select class="filterby age"> 
 
    <option value="all">All ages</option> 
 
    <option value="18-25">18 to 25</option> 
 
    <option value="25-35">26 to 35</option> 
 
    <option value="36-45">36 to 45</option> 
 
    <option value="46-55">46 to 55</option> 
 
    <option value="56-65">56 to 65</option> 
 
</select> 
 

 
<select class="filterby"> 
 
    <option value="all">Show all</option> 
 
    <option value="glasses">Glasses</option> 
 
    <option value="sunglasses">Sunglasses</option> 
 
</select> 
 

 
<select class="filterby"> 
 
    <option value="all">Eyes</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="brown">Brown</option> 
 
    <option value="green">Green</option> 
 
    <option value="grey">Grey</option> 
 
</select> 
 

 
<div class="box all blue glasses" data-age="18">box all 18 blue glasses</div> 
 
<div class="box all green sunglasses" data-age="37">box all 37 green sunglasses</div> 
 
<div class="box all grey glasses" data-age="55">box all 55 grey glasses</div> 
 
<div class="box all brown sunglasses" data-age="22">box all 22 brown sunglasses</div> 
 
<div class="box all blue glasses" data-age="47">box all 47 blue glasses</div>