Question

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

我使用select值定位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();
  }

Answer 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代替并跳过查询DOM的jQuery来执行相同操作。
我还缓存了.item-section元素，因此您不会在每次更改选择时反复查询DOM。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: