javascript - jQuery点击过滤列表

Question

抱歉，但我对 js 还很陌生。基本上我在顶部有主导航（#filter），然后我有 3 个进一步的列表（#one和#two）#three。

我想要做的是当点击所有它显示所有列表项来自#one，#two和#three。然后当点击One它时，它只显示列表项 from #one，Twofrom#two和Threefrom #three。

这是帮助的标记。

<ul id="filter">
  <li class="current">
    <a href="#">All</a>
  </li>
  <li>
    <a href="#">One</a>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a>
  </li>
</ul>

<ul id="one">
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
</ul>

<ul id="two">
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
</ul>

<ul id="three">
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
</ul>

Answer 1

$(function() {
    $('#filter a').on('click', function(e) {
        e.preventDefault();
        var clicked = $.trim( $(this).text().toLowerCase() );
        if ( clicked == 'all' ) {
            $('#one, #two, #three').show();
        }else{
            $('#one, #two, #three').hide();
            $('#' + clicked).show();
        }

        $(this).closest('li')
               .addClass('current')
               .siblings()
               .removeClass('current');
    });
});