使用jquery显示/隐藏多组div

下面的示例中，我使用与示例类似的代码制作了一个测试php文件

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>




  jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
});

全部的
第一组
第2组
第3组
第4组
益母草
益母草
益母草
益母草
jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'.targetDiv'）.hide（）；
jQuery（'#div'+$（this.attr（'target'））.show（）；
});
});

该示例非常有效，但是如果有多个div具有id，例如“id='div1'，”，则不会显示其余的div

比如说

 <div class="buttons">
 <a  id="showall">All</a>
 <a  class="showSingle" target="1">Div 1</a>
 <a  class="showSingle" target="2">Div 2</a>
 <a  class="showSingle" target="3">Div 3</a>
 <a  class="showSingle" target="4">Div 4</a>
 </div>

 <div id="div1" class="targetDiv">Lorum Ipsum1</div>
 <div id="div1" class="targetDiv">Some content</div>
  <div id="div1" class="targetDiv">Some content 1</div>
 <div id="div2" class="targetDiv">Lorum Ipsum2</div>
 <div id="div2" class="targetDiv">Different content 1</div>
 <div id="div2" class="targetDiv">different content 2</div>
 <div id="div3" class="targetDiv">Lorum Ipsum3</div>
 <div id="div4" class="targetDiv">Lorum Ipsum4</div>

全部的
第一组
第2组
第3组
第4组
益母草
一些内容
部分内容1
益母草
不同内容1
不同内容2
益母草
益母草

当我单击target=1的按钮时，只会显示id=“div1”的第一个div，其余的都隐藏起来 我希望显示id=“div1”的所有div

我看过一些例子，但我不明白我遗漏了什么

提前谢谢

---

vaggelis

第二个示例中的HTML无效，因为不能有多个元素具有相同的

id

。要解决此问题，请使用

class

属性对目标div元素进行分组

还要注意，向元素添加自己的自定义属性是无效的，并且可能会导致HTML呈现和JS出现问题。相反，可以使用

data-*

属性来存储带有元素的自定义数据。试试这个：

jQuery（函数（$）{
$（'#showall'）。单击（函数（）{
$（'.targetDiv'）.show（）；
});
$（'.showSingle'）。单击（函数（）{
$（'.targetDiv'）.hide（）；
$（'.div'+$（this.data（'target'））.show（）；
});
});

全部的
第一组
第2组
第3组
第4组
益母草
一些内容
部分内容1
益母草
不同内容1
不同内容2
益母草
Lorum Ipsum4
根据定义，ID必须是唯一的

如果需要对项目进行分组，可以使用几个类：

<div id="div1" class="targetDiv group1">Lorum Ipsum1</div>
<div id="div2" class="targetDiv group1">Some content</div>
<div id="div3" class="targetDiv group1">Some content 1</div>
<div id="div4" class="targetDiv group2">Lorum Ipsum2</div>
<div id="div5" class="targetDiv group2">Different content 1</div>
<div id="div6" class="targetDiv group2">different content 2</div>
<div id="div7" class="targetDiv group3">Lorum Ipsum3</div>
<div id="div8" class="targetDiv group3">Lorum Ipsum4</div>

第二个示例中的HTML无效，因为不能有多个元素具有相同的
id
hello，那么我如何在div上标记一个组以使用按钮显示/隐藏？我为您添加了一个答案，下面的内容id必须是唯一的。如果您想用一组代码隐藏多个div，那么应该使它们都是同一个类。不是ID。然后使用相同的类名遍历div并隐藏每个div。
$(".targetDiv.group1").hide();
$(".targetDiv.group2").hide();
$(".targetDiv.group3").hide();