Javascript 隐藏元素和显示元素

嗨，伙计们，我有一个非常简单的时间表。我希望能够隐藏某些元素，并根据用户单击的内容显示某些元素

小提琴：

然而，你可以看到，它的所有工作良好，除了我不能得到所有的元素显示，因为我使用保存id两次。因此，当用户点击初学者，它应该显示时间表上的所有初学者课程，但它只显示第一节，而不是第二节，因为我已经使用了两次id，我想知道是否有办法解决这个问题

HTML:

使用class.div1,2,3代替div1,2,3

jQueryfunction{ jQuery'showall'。单击函数{ jQuery'.targetDiv'.show； }; jQuery'.showSingle'.clickfunction{ jQuery'.targetDiv'.hide； jQuery'.div'+$this.attr'target'.show； }; }; 全部的 初学者 中级/高级 孩子们 星期一

07:15 - 08:15     降伏式摔跤 11:00 - 12:00     电路 12:00 - 13:00     BJJ类 13:00 - 14:00     BJJ拳击 16:00 - 16:45     4-7岁的毛猴 16:45 - 17:45     8-11岁的青少年 18:00 - 19:00     BJJ类 18:30 - 19:30     BJJ基础

---

你不是已经问过这个问题了吗？\@Difster没有回答，所以我不得不重新措辞，希望人们能更好地理解它，但你仍然在重复使用id名称。您需要根据类进行更改。我在上一篇文章中提出了一个解决方案。@RonTheOld您不想重用id名称。这就是上课的目的。至于隐藏或显示元素，您可以使用.classList.remove'hide'或.classList.add'YourClassHere'在JavaScript中添加或删除类；ID是唯一的标识符。如果有其他方法，比如数据id，你不应该使用它们两次。很好，我现在理解了这个问题，非常感谢你

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a id="showall">All</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="1">Beginners</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="2">Intermediate/Advanced</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="3">Kids</a>
    </div>
</div>
<div class="container">
    <h1>Monday</h1><span class="border"></span>
    <p style=" font-size: 17px;"></p>
    <div class="targetDiv" id="div1">
        <b>07:15 - 08:15</b>     Submission Wrestling<br>
        <b>11:00 - 12:00</b>     Circuits<br>
        <b>12:00 - 13:00</b>     BJJ Class<br>
    </div>
    <div class="targetDiv" id="div2">
        <b>13:00 - 14:00</b>     BJJ Sparring<br>
    </div>
    <div class="targetDiv" id="div3">
        <b>16:00 - 16:45</b>     Mat Monkeys (ages 4-7)<br>
        <b>16:45 - 17:45</b>     Juniors (ages 8-11)<br>
    </div>
    <div class="targetDiv" id="div1">
        <b>18:00 - 19:00</b>     BJJ Class<br>
        <b>18:30 - 19:30</b>     BJJ Fundamentals<br>
    </div>
    <div class="targetDiv" id="div2">
        <b>19:00 - 20:00</b>     BJJ Sparring
        <p></p>
    </div>
</div>

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