Скрытие элементов на основе атрибута данных, минимальных и максимальных значений

Question

Я создаю базовый фильтр для удаления некоторых элементов из списка. Есть только 12 предметов, поэтому ИМО недостаточно, чтобы беспокоиться о ленивой загрузке или рендеринге. Просто используя jQuery, чтобы скрыть элементы.

Элементы отфильтрованы, используя номера из выпадающего списка select, один для minValue и один для maxValue. Значение, относящееся к каждому div, сохраняется в data-bedrooms на div.

HTML пример

<div class="property-item" data-bedrooms="7">7 bedrooms</div> 

Я запуск моей логики .change одного из моих выпадающих. Затем я использую filter(), чтобы возвращать элементы, которые соответствуют (или не соответствуют) условиям minValue и maxValue и исчезают в них.

Вот полный код ручки, где вы можете увидеть все в действии: http://codepen.io/anon/pen/ALdOLW

Что я нахожу в том, что первая подборка работ (например, выберите мин 4 и вы удалите все ниже 4), но попытаться выберите максимальное значение, и все начнет ошибочно.

Когда вы выбираете второе значение, оно возвращает все предыдущие результаты. Мне нужно связать оба выбора вместе.

Куда я иду не так?

Мне нужно объединить fadeIn и fadeOut, чтобы проверить как maxValue и minValue

return $(this).attr('data-bedrooms') < minValue || > maxValue; 

, но я знаю, выше, является неправильным синтаксисом

Answer 1

OP похоже, что ваш код был в основном работает, я думаю, что вы работаете в некоторых условиях гонки, потому что ваш код был анимировать несколько раз. Я разблокировал ваш код и реорганизовал код, чтобы вы выполнили две операции вместо 4. Я также включил вашу функцию фильтра в отдельную функцию. IMO. Внеся эти изменения, вы улучшаете читаемость и поддерживаемость кода с течением времени.

// Translating 'min' and 'max' to numbers that we can compare against 
// This makes it easier to perform the <= >= checks 
if (minValue === 'min-default') { 
    minValue = 0; 
} 
if (maxValue === 'max-default') { 
    maxValue = 1000; // This should probably find the highest value from the available options 
} 

// Moved this out to its own function that compares the entire range at once 
function filterBedroomsRange(index, item) { 
    var bedrooms = $(item).attr('data-bedrooms'); 

    // Validate against the selected range together to avoid double filter/double animation issues 
    // The number of bedrooms must be greater than or equal to the min value, and less than, or equal to the maxValue 
    return bedrooms >= minValue && <= maxValue; 
} 


// Hide items that don't match the range 
properties.find('.property-item').filter(function(index, item) { 
    // Return the negative of `filterBedroomsRange` to find items to hide 
    return !filterBedroomsRange(index, item); 
}).fadeOut('fast'); 


// Show items that do match the range 
properties.find('.property-item').filter(filterBedroomsRange).fadeIn('fast'); 

Codepen: http://codepen.io/anon/pen/VKdPNB

Answer 2

а не делать

if (minValue != 'min-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') < minValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') >= minValue; 
    }).fadeIn('fast'); 
    } 
    if (maxValue != 'max-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') > maxValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') <= maxValue; 
    }).fadeIn('fast'); 
    } 

You следует делать

$(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') < minValue) || ((maxValue != 'max-default') && $(this).attr('data-bedrooms') > maxValue); 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') >= minValue) && ((maxValue != 'max-default') && $(this).attr('data-bedrooms') <= maxValue); 
    }).fadeIn('fast'); 

проверка http://codepen.io/anon/pen/dpKNAZ