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

Question

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

这是我到目前为止所做的：

    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时输入您可以检查是否选中了正确的无线电输入，并根据价格和类别过滤数据。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;