Question

我正在尝试创建一个可过滤的列表，您可以在其中选择min和max号码，并隐藏不适合这两个选项的项目。目前我只关注最小值。

我有一个数字1-4的选择框：

<select class="bedroom-min">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

我有很多项data-bedrooms设置为值：

<div class="property-item" data-bedrooms="3">3 bedrooms</div>

在上面的示例中，如果显示fadeOut选项select或4，我想5上述元素，因为低于最小数量的任何内容都不应该是所示。

我尝试了以下内容：

$(".bedroom-min").change(function() {
  var minValue = $('select.bedroom-min').val();
  $('.property-load-section').find('.property-item[data-bedroom<' + minValue + ']').fadeOut('fast');
});

选择器应该选择小于minValue的卧室数字数据，但它没有任何作用，尽管没有错误。

有什么想法吗？

Codepen

Answer 1

您可以使用filter（）函数根据元素的值过滤元素，因此在这种情况下，您希望显示值大于或等于minValue的元素并隐藏其余元素。

<强> HTML

<select class="bedroom-min">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<div class="property-load-section">
   <div class="property-item" data-bedrooms="5">5 bedrooms</div>
   <div class="property-item" data-bedrooms="4">4 bedrooms</div>
   <div class="property-item" data-bedrooms="3">3 bedrooms</div>
   <div class="property-item" data-bedrooms="2">2 bedrooms</div>
</div>

<强> JS

$("select").change(function() {
  var minValue = $('select.bedroom-min').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') < minValue;
  }).fadeOut('fast');
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') >= minValue;
  }).fadeIn('fast');
});

CODEPEN

使用所选选项

Codepen

1 个答案: