在循环中隐藏和显示内容 - hide and show content in loop php jquery

hide and show content in loop php jquery

本文关键字：显示隐藏循环 | 更新日期: 2023-09-27

嗨，伙计们，我需要一些帮助，我有这些代码，我需要通过id显示内容点击显示内容后，我需要通过相同的id

显示内容

    <script type="text/javascript">
    function toggleAndChangeText() {
         $('#divToToggle').toggle();
         if ($('#divToToggle').css('display') == 'none') {
              $('#aTag').html('Collapsed text mode &#9658');
         }
         else {
              $('#aTag').html('Expanded text mode &#9660');
         }
    }
 </script>
 <style>
 #divToToggle{display:none;}
 </style>

和php/html

          <?php 
        $stmt = $DB_con->prepare("SELECT * FROM `topic` ORDER BY id");
        $stmt->execute();   
        foreach ($stmt->fetchAll() as $row) {
        echo" 
        <div class='Post'>
        <div class='rgt Pimg'><a href='post.php?id=".$row['id']."'><img src='".$row['e_title']."' class='Pimg'/></a></div>
        <div>
        <a id='aTag' href='javascript:toggleAndChangeText()'>
           Show Content
        </a>
        <div id='divToToggle'>".$row['e_content']."</div>
        </div>
        ";
        }
      ?>

不能对多个元素使用相同的ID。使用class代替:

修改脚本为:

   $(document).ready(function(){
    $("a.aTag").on("click", function(){
       var toggleElement = $(this).closest("div").find(".divToToggle");
       toggleElement.toggle();
         if (toggleElement.css('display') == 'none') {
              $(this).html('Collapsed text mode &#9658');
         }
         else {
              $(this).html('Expanded text mode &#9660');
         }
    }); 
 });

和你的PHP代码:

 <?php 
    $stmt = $DB_con->prepare("SELECT * FROM `topic` ORDER BY id");
    $stmt->execute();   
    foreach ($stmt->fetchAll() as $row) {
    echo" 
    <div class='Post'>
    <div class='rgt Pimg'><a href='post.php?id=".$row['id']."'><img src='".$row['e_title']."' class='Pimg'/></a></div>
    <div>
    <a class='aTag' href='javascript:toggleAndChangeText()'> 
       Show Content
    </a>
    <div class='divToToggle'>".$row['e_content']."</div>
    </div>
    ";
    }
  ?>