如何让 JQuery 隐藏的项目使用下拉菜单返回？

Question

我正在尝试使用下拉列表来使用 JQuery 按类别进行过滤。我是新手，所以任何帮助表示赞赏！

当您选择“类别 1 + 事物”时，它应该隐藏所有其他类别及其各自的事物。与其他下拉选项相同。在已经选择了一个下拉项目后在下拉项目之间切换时会出现问题。我无法让隐藏的物品重新出现。感谢您的帮助！

<select id="categoryFilter">
  <option selected="selected" disabled="disabled">Filter by...</option>
  <option value="0">Show All Categories + Things</option>
  <option value="1">Category 1 + Things</option>
  <option value="2">Category 2 + Things</option>
</select>

<h1 class="category-1">Category 1</h1>
    <div class="thing thing-category-1">
        <span>thing 1</span>
    </div>
    <div class="thing thing-category-1">
        <span>thing 2</span>
    </div>
    <div class="thing thing-category-1">
        <span>thing 3</span>
    </div>
<h1 class="category-2">Category 2</h1>
    <div class="thing thing-category-2">
        <span>thing 4</span>
    </div>
    <div class="thing thing-category-2">
        <span>thing 5</span>
    </div>
    <div class="thing thing-category-2">
        <span>thing 6</span>
    </div>

这是javaScript：

$(document).ready(function() {

  $('#categoryFilter').on('change', function() {
      if($(this).val() == '1') {
          $('h1:not(.category-1)').hide();
          $('.thing:not(.thing-category-1)').hide();
      } 
      if($(this).val() == '2') {
          $('h1:not(.category-2)').hide();
          $('.thing:not(.thing-category-2)').hide();
      }
      if($(this).val() == '0') {
          location.reload();
      }
  });
});

演示： http://codepen.io/drews1949/pen/oBbGma?editors=1010

我是前端新手，感谢您的帮助！

Answer 1

使用 jQuery，您可以在 HTML 属性上使用 CSS 子字符串选择器。它们非常有用，并且不需要您更改命名约定或任何 HTML。

编辑：最终，如果您正在编写自己的 HTML，这有点多余，更好的方法是将您的分类项目包装在它们自己的父元素中，而不是单独命名所有内容.

这是一个例子

// Always cache DOM queries

// returns all elements with class ending in "category-1"
var $opt1 = $('[class$="category-1"]')

// returns all elements with class ending in "category-2"
var $opt2 = $('[class$="category-2"]')

var $selector = $('#categoryFilter')

window.onload = init()

function init(){
  
  $selector.on('change',function(){

    if($selector.val()==0){$opt2.show();$opt1.show()}
    if($selector.val()==1){$opt1.show();$opt2.hide()}
    if($selector.val()==2){$opt2.show();$opt1.hide()}

  })
    
}

<select id="categoryFilter">
  <option selected="selected" disabled="disabled">Filter by...</option>
  <option value="0">Show All Categories + Things</option>
  <option value="1">Category 1 + Things</option>
  <option value="2">Category 2 + Things</option>
</select>

<h1 class="category-1">Category 1</h1>
    <div class="thing thing-category-1">
        <span>thing 1</span>
    </div>
    <div class="thing thing-category-1">
        <span>thing 2</span>
    </div>
    <div class="thing thing-category-1">
        <span>thing 3</span>
    </div>
<h1 class="category-2">Category 2</h1>
    <div class="thing thing-category-2">
        <span>thing 4</span>
    </div>
    <div class="thing thing-category-2">
        <span>thing 5</span>
    </div>
    <div class="thing thing-category-2">
        <span>thing 6</span>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 2

对命名稍作更改 - 最初隐藏所有元素，然后选择 .show() 选定选项。同样正如@JoshuaT 所建议的那样——最好用一个类名将所有元素包装在一个父容器中并删除各个类——除非你当然想用 .thin 类等做不同的事情。以下是编辑后的更简单的版本。

$(document).ready(function() {

  $('#categoryFilter').on('change', function() {
    var sel = $(this).val();
      $('.category').hide();
      $('.thing').hide();
      $('.category'+ sel).show();
      $('.thing' + sel).show();
  });
});

.category{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryFilter">
  <option selected="selected" disabled="disabled">Filter by...</option>
  <option value="">Show All Categories + Things</option>
  <option value="1">Category 1 + Things</option>
  <option value="2">Category 2 + Things</option>
</select>

<div class="category category1">
  <h1>Category 1</h1>
    <div>
        <span>thing 1</span>
    </div>
    <div>
        <span>thing 2</span>
    </div>
    <div>
        <span>thing 3</span>
    </div>
</div>
<div class= "category category2">
  <h1>Category 2</h1>
    <div>
        <span>thing 4</span>
    </div>
    <div>
        <span>thing 5</span>
    </div>
    <div>
        <span>thing 6</span>
    </div>
</div>