如何使用下拉菜单将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>