Question

我正在创建一个基本过滤器来从列表中删除一些项目。只有12个项目，所以IMO不足以打扰延迟加载或渲染。只需使用jQuery来隐藏项目。

使用select下拉列表中的数字过滤掉项目，一个用于minValue，一个用于maxValue。与每个div相关的值存储在div上的data-bedrooms中。

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;

但我知道上面的语法不正确

Answer 1

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

你应该做

    $(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

根据数据属性，最小值和最大值隐藏项目

2 个答案: