jQuery在PHP foreach循环上切换

时间:2016-08-09 04:02:13

标签: javascript php jquery codeigniter foreach

使用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');
      });
  });

现在它正在运行,但是当我按下隐藏按钮时,它会隐藏所有内容,我该如何隐藏我想要的内容?

1 个答案:

答案 0 :(得分:2)

  • this
  • 中使用handler-function上下文
  • 使用.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>