如何隐藏 <li> 与jQuery的？

Question

我有两个<ul></ul>元素。 一个包含链接，另一个包含我要显示的内容，具体取决于单击哪个链接。 这是<ul>'s的代码：

<div class="container">
  <ul id="filter">
    <li class="current"><a href="#">Attendess (Middle School/High School Students)</a></li>
    <li><a href="#">Attendees (College Students)</a></li>
    <li><a href="#">Mentor/Vounteer</a></li>
</ul>

<ul id="forms">
    <li class="Attendess (Middle School/High School Students)"> <% include ./forms/Students %> </li>
    <li class="Attendees (College Students)"> <% include ./forms/college %> </li>
    <li class="Mentor/Vounteer"> <% include ./forms/attendees %> </li>
</ul>

现在使用jQuery，我实现了选择不同过滤器的功能，但是当我这样做时，表单不会隐藏。

这是该代码：

  <script type="text/javascript">
    $(document).ready(function(){
      $("#filter a").click(function(){
        $("#filter .current").removeClass("current");
        $(this).parent().addClass("current");
        var filterVal = $(this).text();
        $("#forms li").fadeIn();
        $("#forms li").not("." + filterVal).fadeOut();
      });
    });

让我知道你们的想法吗？

Answer 1

我已经更改了部分代码。 一个类不能间隔。 间隔的类表示：多个类。

 $(document).ready(function() { $("#filter a").click(function() { $("#filter .current").removeClass("current"); $(this).parent().addClass("current"); var filterVal = $(this).data('index'); $("#forms li").fadeIn(); $("#forms li:not(." + filterVal + ")").hide(); }); }); 

 .college, .attendees { display: none; } a:hover{ cursor:pointer; text-decoration:underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul id="filter"> <li class="current"><a data-index="students">Attendess (Middle School/High School Students)</a></li> <li><a data-index="college">Attendees (College Students)</a></li> <li><a data-index="attendees">Mentor/Vounteer</a></li> </ul> <ul id="forms"> <li class="students"> <% include ./forms/Students %> </li> <li class="college"> <% include ./forms/college %> </li> <li class="attendees"> <% include ./forms/attendees %> </li> </ul>