要素を表示して要素を表示する

Question

こんにちは、私は非常に簡単なタイムテーブルをレイアウトしています。私は、特定の要素を隠し、ユーザーのクリックに応じて特定の要素を表示できるようにしたいと考えています。

フィドル：あなたはそのすべてが、私は二回、保存IDを使用していますので、すべての要素を表示するために取得するカントから離れて正常に動作していることがわかりますしかしLink

。ユーザーが初心者をクリックすると、タイムテーブルにすべての初心者クラスが表示されるはずですが、IDを2回使用したため、最初のdivと2番目のdivは表示されません。

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>