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。请避免使用类名，因为它们用于引用元素集，而ids是指各个元素。

但是，这并不是所示代码的问题。问题是您尝试根据类而不是id选择元素 - 类为.，id为#。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<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>
<ul>
	<li  class="targetLi posts li1">posts</li>
    <li  class="targetLi videos li2">videos</li>
    <li  class="targetLi images li3">images</li>
    <li  class="targetLi gifs li4">gifs</li>
    <li  class="targetLi playlist li5">playlist</li>
    <li  class="targetLi posts li1">posts</li>
</ul>

Answer 3

将选择器从＃li1更改为[id =＆＃34; li1＆＃34;]应该可以解决问题。

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

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

3 个答案: