隱藏元素和顯示元素

Question

嗨，我有一個非常簡單的時間表佈局。我希望能夠隱藏某些元素並根據用戶點擊的內容顯示某些元素。

小提琴：Link

但是你可以看到，它的所有從我除了工作的罰款不能讓所有的元素展現，因爲我使用的是保存ID兩次。所以當用戶點擊初學者時，它應該在時間表上顯示所有初學者類，但它只顯示第一個div而不顯示第二個div，因爲我已經使用了兩次id，我想知道是否有解決方法？

HTML：

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

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

Answer 1

代替#div1,2,3使用類.div1,2,3

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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;"> 
 
    <div class="targetDiv 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 div2"> 
 
     <b>13:00 - 14:00</b>     BJJ Sparring<br> 
 
    </div> 
 
    <div class="targetDiv 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 div1"> 
 
     <b>18:00 - 19:00</b>     BJJ Class<br> 
 
     <b>18:30 - 19:30</b>     BJJ Fundamentals<br> 
 
    </div> 
 
    <div " class="targetDiv div2 "> 
 
\t \t \t <b>19:00 - 20:00</b>     BJJ Sparring</p> 
 
\t \t </div> 
 
\t \t 
 
\t \t </div>