Question

我怎样才能让人们可以过滤年龄？所以我可以使用选择框，那个会显示18到25或26和35之间的每个人，依此类推？

现在我使用这个JS代码进行过滤：

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(".");
	
	var $selectedDivs = jQuery(document).find(".box." + filters);
	$selectedDivs = filterByAge($selectedDivs);
    jQuery(document).find(".box").hide(0);
    $selectedDivs.show(0)
});

function filterByAge(objectToFilter){
	var value = jQuery("select.filterby.age").val();
	if(value == "all"){
		return objectToFilter;
	}
	var minMax = value.split("-");
	var min = minMax[0];
	var max = minMax[1];
	
	return objectToFilter.filter(function (){
		var age = jQuery(this).data("age");
		return age >= min && age < max;
	});
}

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

jQuery过滤年龄之间的年龄

1 个答案: