javascript - 使用选择选项值进行过滤

Question

我有一个类别下拉列表和多个带有类名的div，我希望当用户从下拉列表中选择选项时根据所选选项过滤div，例如当用户选择它时我有一个名为化妆的类别我只想显示带有类(class)化妆的 div，这是我尝试过的:

$('#categories').change(function() {
  var val = $(this).val();
  if (val == "makeup") {
    $('.makeup').fadeIn();
  } else {
    $(".makeup").not('.' + value).fadeOut();
    $('.makeup').filter('.' + value).fadeIn();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="makeup">
  Div 1
</div>
<div class="makeup">
  Div 2
</div>
<div class="makeup">
  Div 3
</div>
<div class="other">
  Div 4
</div>

Answer 1

• 在所有 div 上放置一个公共(public)类“类别”。
• 将更改处理程序绑定(bind)到选择
• 当它发生变化时，淡出所有选项，并淡入与该​​值作为类匹配的选项

$('#categories').on('change', function(e) {
  $('.category')
    .fadeOut()
    .filter('.'+ e.target.value)
    .fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="category makeup">
  Div 1
</div>
<div class="category makeup">
  Div 2
</div>
<div class="category makeup">
  Div 3
</div>
<div class="category other">
  Div 4
</div>