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

＆＃13;

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

＆＃13;

<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 ">
			<b>19:00 - 20:00</b>     BJJ Sparring</p>
		</div>
		
		</div>

＆＃13;

隐藏元素和显示元素

1 个答案: