Question

目前，我正在使用菜单列表来帮助我改进jQuery，但是我遇到了一个问题。我确定我应该能够使用这个功能来选择项目而.not（）来隐藏不需要的项目

我把它放在小提琴中

<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

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

您在<ul class"menu">中错过了等号。
您使用jQuery find()尝试获取所点击元素的class。相反，您可以使用attr()来获取元素的属性。我将该类设置为名为selection的变量。
点击该按钮，我首先show()所有li个元素，以恢复在之前点击过程中隐藏的所有元素，以防我们需要再次显示它们。
< / LI>
然后我检查selection是否设置为任何内容。在点击无类别＆＃34;显示全部＆＃34;按钮，它不会。如果设置了该变量，则表示您已点击其中一个食品类别按钮，因此......
$('.menu').find('li').not('.' + selection).hide(); - 我们选择所有li元素，然后使用not()减去不属于我们班级的元素并隐藏它们。

＆＃13;

$(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();

    }

  });
});

＆＃13;

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

＆＃13;

用这个隐藏类而不是？

1 个答案: