隐藏和显示循环php jquery中的内容 [英] hide and show content in loop php jquery

问题描述

大家好，我需要一些帮助我有这些代码，我需要显示内容ID后
克里克显示内容我需要显示内容相同的ID

 < script type =text / javascript> 
函数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（）'> 
显示内容
< / a> 
< div id ='divToToggle'>。$ row ['e_content']。< / div> 
< / div> ; 
; 
} 
？> 
  

解决方案

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

将您的脚本更改为：

< $（$code $> $（$）$（$）$（$）$ toggleElement = $（this）.closest（div）。find（。divToToggle）;
toggleElement.toggle（）;
if（toggleElement.css（'display'）=='none '）{
$（this）.html（'Collapsed text mode&＃9658'）;
}
else {
$（this）.html（'Expanded text模式&＃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（）'> 
显示内容
< / a> 
< div class ='divToToggle'>。$ row ['e_content']。< / div> 
< / div> ; 
; 
} 
？> 
  

Hi guys i need some help i have these code i need to show content by id after clik to show content i need to show content by the same 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>

and this code 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>
        ";
        }
      ?>

解决方案

You cannot use same ID's for multiple elements. Use class instead:

Change your script to :

   $(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');
         }
    }); 

 }); 

And your PHP code to this:

 <?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>
    ";
    }
  ?>

这篇关于隐藏和显示循环php jquery中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！