jquery通过多个范围的数字进行过滤

Question

认为我陷入了困境......我试图获取项目列表并根据对象的属性创建过滤器。我把它分解成一个更容易的书和成本和一年的例子。我目前在页面上有一系列图书和过滤器（复选框），可以选择这些图书以仅显示一定范围内的成本和/或年份。这里是我的代码至今：

<div id="filters"> 
<h1>FILTERS</h1> 
<div class="filter filter_cost"> 
    <input class="target" type="checkbox" min="0" max="9" />Under $10.00<br/> 
    <input class="target" type="checkbox" min="10" max="19" />$10-$19<br/> 
    <input class="target" type="checkbox" min="20" max="29" />$20-$29<br/> 
    <input class="target" type="checkbox" min="30" max="39" />$30-$39<br/> 
    <input class="target" type="checkbox" min="40" max="1000" />$40 and Over<br/> 
</div> 
<div class="filter filter_year"> 
    <input class="target" type="checkbox" min="1700" max="1799" />18th Century<br/> 
    <input class="target" type="checkbox" min="1800" max="1899" />19th Century<br/> 
    <input class="target" type="checkbox" min="1900" max="1999" />20th Century<br/> 
    <input class="target" type="checkbox" min="2000" max="2999" />21st Centruy<br/> 
</div> 
</div> 
<div id="books"> 
<h1>BOOKS</h1> 
<div class="book"> 
    <h1>Book 1</h1> 
    <input type="hidden" name="cost" value="13" /> 
    <input type="hidden" name="year" value="1997" /> 
</div> 
<div class="book"> 
    <h1>Book 2</h1> 
    <input type="hidden" name="cost" value="22" /> 
    <input type="hidden" name="year" value="1872" /> 
</div> 
</div> 

和我的jQuery（使用1.6.2）：

$(document).ready(function() { 
$("input.target").change(function() { 
    filterResults(); 
}); 
}); 

function filterResults(){ 
$(".book").each(function() { 
    var cost = $(this).find("input[name='cost']").val(); 
    var year = $(this).find("input[name='year']").val(); 
    var cover = $(this).find("input[name='cover']").val(); 
    var isHidden = false; 
    //console.log("Cost in Range: "+filterRange(cost, ".filter_cost")); 
    //console.log("Year in Range: "+filterRange(year, ".filter_year")); 

    var filterCost = filterRange(cost, ".filter_cost")?showBook($(this)):hideBook($(this)); 
    var filterYear = filterRange(year, ".filter_year")?showBook($(this)):hideBook($(this)); 
    isHidden?"":filterCost; 
    isHidden?"":filterYear; 

    function showBook(obj) { 
     obj.show(); 
    } 

    function hideBook(obj) { 
     isHidden = true; 
     obj.hide(); 
    } 

}) 
} 

function filterRange(amount, elem) { 
var checkedInputs = $(elem).find("input:checked").length; 
var totalInputs = $(elem).find("input").length; 
var inRange = function(){ 
    $(elem).find("input:checked").each(function() { 
     var min = $(this).attr('min'); 
     var max = $(this).attr('max'); 
     if(amount >= min && amount <= max){ 
      return true; 
     } else { 
      return false; 
     } 
    }); 
}; 
if(checkedInputs == 0 || totalInputs == checkedInputs){ 
    return true; 
} 
if(inRange()){ 
    return true; 
} else { 
    return false; 
} 
} 

我的问题是，在filterRange功能我不知道如何创建基于每个检查的输入的条件范围。所以价格范围可以是10-19和30-39。我的尝试（var inRange）是通过每个检查的输入，检查成本是否在范围内，然后返回true，否则返回false。我认为我只是从根本上偏离轨道，并不确定这种方法是否可行。任何输入将不胜感激。

Answer 1

在对jQuery的DOM元素return语句，跳出循环的每个循环。所以你的实现是错误的。尝试这个。

function filterRange(amount, elem) { 
    var checkedInputs = $(elem).find("input:checked").length; 
    var totalInputs = $(elem).find("input").length; 
    var returnValue = false; 

    $(elem).find("input:checked").each(function() { 
     var min = $(this).attr('min'); 
     var max = $(this).attr('max'); 
     if(amount >= min && amount <= max){ 
      returnValue = true; 
      return true; 
     } 
    }); 

    return (checkedInputs == 0 || totalInputs == checkedInputs || returnValue); 
} 

Answer 2

尝试：

​​