在所选选项下方隐藏 div 和自定义数据属性编号

Question

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

我有一个 select 框，里面有数字 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>

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

我尝试了以下方法：

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

select或者应该是select一个卧室号数据小于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

在所选选项下方隐藏 div 和自定义数据属性编号

Hide div with custom data attribute number below selected option

jquery

custom-data-attribute

Codepen