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

Question

我正在使用 select 元素构建过滤工具。当您从下拉列表中选择某些内容时，它应该过滤下面的 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();
  }

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相反，跳过 jQuery 查询 DOM 来执行相同的操作。
• 我还缓存了 .item-section元素，这样您就不会在选择的每次更改时一遍又一遍地查询 DOM。