jquery - 用这个隐藏类而不是？

Question

目前我正在开发一个菜单列表来帮助我改进 jQuery，但是我遇到了一个问题。我确信我应该能够使用 this 函数来选择项目，并使用 .not() 隐藏不需要的项目

我把它放在 fiddle 里

https://jsfiddle.net/x19L1pwt/

<div class="menu-wrapper">
            <h4>Menu</h4>
            <button class="vegetarian">Vegetarian</button><button class="fish">Fish dishes</button><button class="meat">Meat Dishes</button><button id="all">Show all</button>
            <ul class"menu">
                <li class="meat">Hamburger</li>
                <li class="fish">Smoked Salmon</li>
                <li class="vegetarian">Miso-grilled aubergine & cucumber pickle rice bowl</li>
                <li class="meat">Steak</li>
                <li class="fish">Fish and Chips</li>
                <li class="vegetarian">Aubergine parmigiana with crispy breadcrumbs</li>       
            </ul>    

    </div>    

$(document).ready(function(){
    $('button').click(function(){
        var $this = $(this).find("class");
        $this.not($this).hide();
        console.log($this);
    });
});

Answer 1

您的代码存在一些错误，需要添加一些内容。我下面有一个工作示例。我的改变:

1. 您在 <ul class"menu"> 中缺少等号.

2. 您正在使用 jQuery find() 尝试获取 class您单击的元素的。相反，您可以使用 attr()获取元素的属性。我将该类设置为名为 selection 的变量.

3. 单击按钮后，我首先show()所有li元素，以恢复之前单击期间隐藏的任何元素，以防我们需要再次显示它们。

4. 然后我检查是否 selection设置为任意值。如果单击无类别的“显示全部”按钮，则不会。如果设置了该变量，则意味着您单击了其中一个食物类别按钮，因此...

5. $('.menu').find('li').not('.' + selection).hide(); - 我们选择全部li元素，然后使用 not() 减去不属于我们类的元素并隐藏它们。

$(document).ready(function() {
  $('button').click(function() {

    // get class attribute of clicked button
    var selection = $(this).attr('class');

    // show all items
    var $items = $('.menu').find('li');
    $items.show(); 

    // if the clicked button had a class...
    if (selection) { 

      // hide our items that do not have that class
      $items.not('.' + selection).hide();

    }

  });
});

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

<div class="menu-wrapper">
  <h4>Menu</h4>
  <button class="vegetarian">Vegetarian</button>
  <button class="fish">Fish dishes</button>
  <button class="meat">Meat Dishes</button>
  <button id="all">Show all</button>
  <ul class="menu">
    <li class="meat">Hamburger</li>
    <li class="fish">Smoked Salmon</li>
    <li class="vegetarian">Miso-grilled aubergine & cucumber pickle rice bowl</li>
    <li class="meat">Steak</li>
    <li class="fish">Fish and Chips</li>
    <li class="vegetarian">Aubergine parmigiana with crispy breadcrumbs</li>
  </ul>
</div>