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 выходит из цикла. Так что ваша реализация неверна. Попробуйте это.

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

Попробуйте:

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

    if (checkedInputs == 0 || totalInputs == checkedInputs) {
        return true;
    }
    if (inRange) {
        return true;
    } else {
        return false;
    }
}