jQuery在PHP foreach循環上切換

Question

使用Codeigniter 3.x

我正在嘗試使用foreach循環從數據庫獲取數據。

<h3 style="margin-right:15px;" id='hideshow'>August 2016</h3>
<?php foreach($duxeos as $e): ?>
<div class='content' ><h4 class="dropdate"><?php echo $e->fulldate;?></h4><div class="cdropdate" class="defhide"><?php echo $e->content;?></div></div>
<?php endforeach; ?>

javascript：

  jQuery(document).ready(function(){
      jQuery('.hideshow').live('click', function(event) {
           jQuery('.content').toggle('show');
      });
  });

  jQuery(document).ready(function(){
      jQuery('.dropdate').live('click', function(event) {
           jQuery('.cdropdate').toggle('show');
      });
  });

現在它可以工作了，但是當我按下“隱藏”按鈕時，它隱藏了所有內容，我該如何隱藏我想要的內容？

Answer 1

• 在handler-function使用this上下文
• 使用.on而不是.live
• 使用.closest獲取最接近的元素，以便找到它的子元素。

 jQuery(document).ready(function() { jQuery('.dropdate').on('click', function(event) { jQuery(this).closest('.content').find('.cdropdate').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <h3 style="margin-right:15px;" id='hideshow'>August 2016</h3> <div class='content'> <h4 class="dropdate">Full-Date</h4> <div class="cdropdate defhide">Content</div> </div> <hr> <div class='content'> <h4 class="dropdate">Full-Date</h4> <div class="cdropdate defhide">Content</div> </div>