javascript - 隐藏/显示具有相同 id 的多个 li 内容

Question

我有很多 li 元素，我想在单击过滤器按钮时隐藏/显示这些元素。

在页面的顶部我有使用这个的按钮:

<span id="filter">                          
    <a class="btn btn-primary btn-xs active" id="showall">Show All</a>
    <a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
    <a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
    <a class="btn btn-info btn-xs showSingle" target="3">Images</a>
    <a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
    <a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>                              
</span>

然后我的 li 元素是这样的:

<li id="li1" class="targetLi posts">
<li id="li2" class="targetLi videos">
<li id="li3" class="targetLi images">
<li id="li4" class="targetLi gifs">
<li id="li5" class="targetLi playlist">
<li id="li1" class="targetLi posts">

请注意 id="li1" 被列出了两次。

$(function(){
    $('#showall').click(function(){
        $('.targetLi').show("slow");
    });
    $('.showSingle').click(function(){
        $('.targetLi').hide("slow");
        $('#li'+$(this).attr('target')).show("slow");
    });
}); 

我想要做的是在按下过滤器按钮时显示具有相同 id 的所有元素。我不确定我错过了什么。例如，当我单击按钮仅显示帖子时，它会隐藏所有内容并仅显示 1 个帖子，即使有 2 个帖子。有人可以帮我指出正确的方向吗？

Answer 1

使用多个 ID 是违反惯例的。因此，您会发现这种方法有几个缺陷，包括只能查询其中一个 ID。请避免这种情况并使用类名，因为它们旨在引用元素集，而 id 旨在引用单个元素。

但是，这不是显示的代码的问题。问题是您试图根据类而不是 id 选择元素 - 类是 。，id 是 #。

我建议重构您的设计以更好地选择这些元素。这包括命名父 ul 元素，以及缓存一些关键元素。如下图所示:

$(function(){
    var parent = $('.targetUl'), list = $('li', parent);
    $('#showall').click(function(){
        list.show("slow");
    });
    $('.showSingle').click(function(){
        var target = '.li'+$(this).attr('target');
        list.not(target).hide("slow");
        $(target,parent).show("slow");
    });
});

#filter a {
    border: inset 1.5px grey;  
    cursor: pointer;
    padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="targetUl">
  <li class="li1 posts">posts</li>
  <li class="li2 videos">videos</li>
  <li class="li3 images">images</li>
  <li class="li4 gifs">gifs</li>
  <li class="li5 playlist">playlist</li>
  <li class="li1 posts">posts</li>
<ul>
  
<div>
  <span id="filter">                          
    <a class="btn btn-primary btn-xs active" id="showall">Show All</a>
    <a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
    <a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
    <a class="btn btn-info btn-xs showSingle" target="3">Images</a>
    <a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
    <a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>                              
  </span>
</div>