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

我有很多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>

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

试试这个

$function{ $'showall'。单击函数{ $'.targetLi'.showslow； }; $'.showSingle'。单击函数 { $'.targetLi'.hideslow； $'.li'+$this.attr'target'.showfast； }; }; 全部展示 帖子 视频 图像 吉布斯 播放列表 帖子 录像带 图像 吉布斯 播放列表 帖子

---

使用多个ID违反惯例。因此，您将发现这种方法存在一些缺陷，包括只能查询一个ID。请避免这样做，并使用类名，因为它们旨在引用元素集，而ID旨在引用单个元素

然而，这不是所示代码的问题。问题是您试图基于类而不是id选择元素-class is.，id is

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

$function{ var parent=$'.targetUl'，list=$'li'，parent； $'showall'。单击函数{ list.showslow； }; $'.showSingle'。单击函数{ var target='.li'+$this.attr'target'； list.nottarget.hideslow； $target，parent.showslow； }; }; 过滤a{ 边框：嵌入1.5px灰色； 光标：指针； 填充：2px； } 帖子 录像带 图像 吉布斯 播放列表 帖子 全部展示 帖子 视频 图像 吉布斯 播放列表

---

将选择器从li1更改为[id=li1]应该可以做到这一点

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

---

ID必须是唯一的。我尝试使用类，但没有任何效果。。。。您正在使用一个类选择器。请尝试一个唯一的类，像ID一样使用，但作为一个类，它应该可以使用css类显示您的代码。当我点击过滤器按钮时，它会隐藏所有内容。我可以看到它在您的代码片段中工作，这正是我所需要的，但由于某些原因，我无法让它在我的代码中工作。我注意到你已经列了两次课了。他们不在一起有什么原因吗？@iamthestreets-当你尝试时，有什么不起作用？您是否注意到我在元素中添加了一个类名，并用它来引用li元素？另外，班级被列为两次事故的原因：P我删掉了那个部分。忽略我上面的评论。我让它工作了。我在课堂上犯了一个错误。我比其他人更喜欢这种方法。谢谢@iamthestreets-我在那里放置了类targetUL，以演示您可以只使用一个类名和元素选择器，而不必在您想要的每个列表元素上放置targetLI。这使得以后添加项目更容易，也减少了重复。

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

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