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

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

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

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

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

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

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

но я знаю, что это неверный синтаксис

javascript,jquery,

2

Ответов: 2

JavaScript, JQuery,

Похожие вопросы

score 1 · Accepted 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');

Кодепен: http://codepen.io/anon/pen/VKdPNB

score -1 · Accepted Answer

-1

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

  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') && $(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