Блог

Я создаю базовый фильтр для удаления некоторых элементов из списка. Всего 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

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

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

Где я ошибаюсь?

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

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

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

OP похоже, что ваш код в целом работал, я предполагаю, что вы столкнулись с некоторыми условиями гонки, потому что ваш код анимировался несколько раз. Я разветвил ваш codepen и реорганизовал код, чтобы вы выполняли две операции вместо 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 amp;amp; <= 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

вместо того, чтобы делать

   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');
  }
  

Вы должны сделать

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

проверьте http://codepen.io/anon/pen/dpKNAZ