javascript - 使用最小值和最大值过滤列表

Question

我正在使用 list.js，我查看了可以找到的 API here .我仍然无法弄清楚如何让我的最低和最高价格过滤器仅显示介于两个范围之间的结果。

这是我目前所拥有的:

    var options = {
    valueNames: ['category', 'price']
};

var featureList = new List('piece-search', options);

$('#filter-red').click(function() {
    featureList.filter(function(item) {
        if (item.values().category == "Red") {
            return true;
        } else {
            return false;
        }
    });
    return false;
});

$('#filter-blue').click(function() {
    featureList.filter(function(item) {
        if (item.values().category == "Blue") {
            return true;
        } else {
            return false;
        }
    });
    return false;
}); 
    
$('#filter-none').click(function() {
    featureList.filter();
    return false;
}); 
    
$('#minPrice').on('change keydown paste input click', function(){
var minPrice = $('#minPrice').val();
    featureList.filter(function(item) {
        if (item.values().price >= minPrice) {
            return true;
        } else {
            return false;
        }
    });
    return false;
});  
    
$('#maxPrice').on('change keydown paste input click', function(){
var maxPrice = $('#maxPrice').val();
    featureList.filter(function(item) {
        if (item.values().price <= maxPrice) {
            return true;
        } else {
            return false;
        }
    });
}); 

.item {
    margin: 0.5em;
    padding: 0.5em;
    width: 40px;
    height: 40px;
    float: left;
    color: white;
}

.item p {
    margin: 0;
    padding: 0;
}

.filter {
  cursor: pointer;
  }
}

.sort.btn {
  cursor: pointer;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="piece-search">

    <ul class="sort-by">
        <li>
            <input class="search" placeholder="Search...">
            <input type="number" placeholder="min price" id="minPrice"/>
            <input type="number" placeholder="max price" id="maxPrice"/>
        </li>
    </ul>

    <ul class="filter">
        <li class="btn" id="filter-none">Show all</li>
        <li class="btn" id="filter-red" value="category">Only show red divs</li>
        <li class="btn" id="filter-blue" value="category">Only show blue divs</li>
    </ul>
                    
    <ul class="list">

        <li class="item" style="background: blue">
            <p class="category">Blue</p>
            <p class="price">14</p>
        </li>

        <li class="item" style="background: red">
            <p class="category">Red</p>
            <p class="price">37</p>
        </li>
                        
        <li class="item" style="background: blue">
            <p class="category">Blue</p>
            <p class="price">22</p>
        </li>
                        
        <li class="item" style="background: blue">
            <p class="category">Blue</p>
            <p class="price">58</p>
        </li>
        
        <li class="item" style="background: red">
            <p class="category">Red</p>
            <p class="price">45</p>
        </li>
     </ul>
</div>

Answer 1

首先，您必须将输入值转换为数字。然后我为你的两个输入使用了一个事件，并且只使用了一个带有 2 个条件的 if 语句。

一般来说，如果你想用不同的条件过滤你的数据，你必须在一个地方使用它们(例如，你可以为红色和蓝色添加单选按钮，然后当你改变 minPrice 或 maxPrice input 你可以检查是否检查了正确的 radio 输入并根据价格和类别过滤数据)。

var options = {
  valueNames: ['category', 'price']
};

var featureList = new List('piece-search', options);




$('#minPrice, #maxPrice').on('change keydown paste input click', function() {
  var minPrice = parseInt($('#minPrice').val(), 10);
  var maxPrice = parseInt($('#maxPrice').val(), 10);
  var category = $('[name="category"]:checked').val();
  featureList.filter(function(item) {
    if(category === 'all') {
      if (item.values().price >= minPrice && item.values().price <= maxPrice) {
        return true;
      } else {
        return false;
      }
    } else {
      if (item.values().price >= minPrice && item.values().price <= maxPrice && item.values().category === category) {
        return true;
      } else {
        return false;
      }
    }
    
  });
  return false;
});



$('[name="category"]').on('change', function() {
  var minPrice = parseInt($('#minPrice').val(), 10);
  var maxPrice = parseInt($('#maxPrice').val(), 10);
  var category = $('[name="category"]:checked').val();
  console.log(category)
  featureList.filter(function(item) {
    if(category === 'all') {
      if (item.values().price >= minPrice && item.values().price <= maxPrice) {
        return true;
      } else {
        return false;
      }
    } else {
      if (item.values().price >= minPrice && item.values().price <= maxPrice && item.values().category === category) {
        return true;
      } else {
        return false;
      }
    }
    
  });
  return false;
});

.item {
  margin: 0.5em;
  padding: 0.5em;
  width: 40px;
  height: 40px;
  float: left;
  color: white;
}

.item p {
  margin: 0;
  padding: 0;
}

.filter {
  cursor: pointer;
}


}
.sort.btn {
  cursor: pointer;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="piece-search">

  <ul class="sort-by">
    <li>
      <input class="search" placeholder="Search...">
      <input type="number" placeholder="min price" id="minPrice" value="0" />
      <input type="number" placeholder="max price" id="maxPrice" value="100" />
    </li>
  </ul>

  <div><label><input type="radio" name="category" value="all" checked>Show all</label></div>
  <div><label><input type="radio" name="category" value="Red">Red</label></div>
  <div><label><input type="radio" name="category" value="Blue">Blue</label></div>

  <ul class="list">

    <li class="item" style="background: blue">
      <p class="category">Blue</p>
      <p class="price">14</p>
    </li>

    <li class="item" style="background: red">
      <p class="category">Red</p>
      <p class="price">37</p>
    </li>

    <li class="item" style="background: blue">
      <p class="category">Blue</p>
      <p class="price">22</p>
    </li>

    <li class="item" style="background: blue">
      <p class="category">Blue</p>
      <p class="price">58</p>
    </li>

    <li class="item" style="background: red">
      <p class="category">Red</p>
      <p class="price">45</p>
    </li>
  </ul>
</div>