根据选择值隐藏jQuery中的元素答案

【问题标题】：Hide elements in jQuery based on select value根据选择值隐藏jQuery中的元素
【发布时间】：2018-02-07 18:11:09
【问题描述】：

我正在使用选择元素构建过滤工具。当您从下拉列表中选择某些内容时，它应该过滤下面的 div 以仅显示该项目的 div。

我使用选择值来定位 div，该值也是该项目所在的 div 的类。因此，例如，如果您在下拉列表中选择衬衫，则该值将是 item-shirts 并且下面的 div 将具有一类单品。

我已经想出如何在选择某些内容时隐藏所有没有所选项目类的内容。但是我不知道如何在选择其他内容时取消隐藏所有内容。任何帮助将不胜感激！

这是我的 HTML

<select>
   <option value="item-shirts">Shirts</option>
   <option value="item-shoes">Shoes</option>
   <option value="item-shoes">Pants</option>
</select>

<div class="item-section item-shirt></div>
<div class="item-section item-shoes></div>
<div class="item-section item-pants></div>

这是我的 jQuery

$('select').on("change", function() {
    var value = $('select').val();
   if($('.item-section').hasClass(value)) {
      $('.item-section.'+value).siblings().hide();
   } else {
      $('.item-section.'+value).siblings().show();
  }

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这类似于将活动类添加到元素列表/组中。通常，您所做的是遍历所有删除活动类的元素（即使它只应用于一个元素），然后将活动类添加到特定元素。在您的情况下，您可能希望隐藏所有 DIV，然后显示特定的 DIV。

var $sections = $( '.item-section' );

$('select').on( 'change', function ( e ) {

  $sections.hide();
  $( '.' + this.value ).show();
  
} );

.item-section {
  margin: 2rem 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
   <option value="item-shirts">Shirts</option>
   <option value="item-shoes">Shoes</option>
   <option value="item-pants">Pants</option>
</select>

<div class="item-section item-shirts">Shirt</div>
<div class="item-section item-shoes">Shoes</div>
<div class="item-section item-pants">Pants</div>

注意：您的标记中有一些错误，我对其进行了更改以使一切正常。即 <option> 标签的重复值和一些缺少的引号。

我也做了一些性能改进。

您的事件处理程序中也不需要$( 'select' ).val()。处理程序的上下文是 <select> 元素，因此您可以改用 this.value 并跳过 jQuery 查询 DOM 来做同样的事情。
我还缓存了 .item-section 元素，因此您不会在每次选择更改时一遍又一遍地查询 DOM。

【讨论】：

【解决方案2】：

没有必要测试hasClass()。您需要做的就是从所选选项中获取值并显示具有该类的<div>。我添加了一个额外的空白选项，这样当您选择它时，它将显示所有 <div>s。

$('select').on("change", function() {
  var value = $('select').val();

  if (value) {
    $(".item-section").hide();
    $("." + value).show();
  } else {
    $(".item-section").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value=""></option>
   <option value="item-shirt">Shirts</option>
   <option value="item-shoes">Shoes</option>
   <option value="item-shoes">Pants</option>
</select>

<div class="item-section item-shirt">Shirts</div>
<div class="item-section item-shoes">Shoes</div>
<div class="item-section item-pants">Pants</div>

【讨论】：