我正在显示来自 php 查询的结果，并希望在不同的幻灯片中显示每个结果

Question

我有一个显示子信息的切换开关工作，但以下切换不起作用，我不知道如何解决这个问题。我使用了 w3schools 的代码来让它工作，但其他名称似乎并没有滑下来，只是显示它们。请问有什么想法吗？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
   <script> 
    $(document).ready(function(){
     $("#flip").click(function(){
     $("#panel").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css"> 
     #panel,#flip
   {
     padding:5px;
    text-align:center;
     background-color:#e5eecc;
     border:solid 1px #c3c3c3;
      }
    #panel
    {
    padding:50px;
   display:none;
   }
   </style>

    $connect = mysql_connect("127.0.0.1" , "root" , "") or die ("Couldnt connect to database");
    mysql_select_db("travellerfile") or die ("couldnt find the database");

    $searchsurname = $_POST['Surname'];
    $searchfirstname = $_POST['Firstname'];
    $searchage = $_POST['Age'];

    $query = mysql_query("SELECT * FROM child WHERE Surname like '%$searchsurname%' and Firstname like '%$searchfirstname%' and Age like '%$searchage%'");
    while($row = mysql_fetch_array($query))
    {
    ?>
    <div id="flip"><?php echo $row['Firstname']; ?> <?php echo $row['Surname']; ?></div>
    <div id="panel"><?php echo $row['DateOfBirth']; ?> <br /> <img src="<?php echo $row['sourcepath']; ?>" width="100px" height="100px"> <form method="post" action="childdetail.php">
                <input name="Button1" type="submit" value="View" /></form>

Answer 1

你不能有重复的元素id，我建议你把它们改成类：

<div class="flip"> 
<div class="panel"> 

至于jQuery，你需要知道panel到slideToggle在哪个@，根据对应的flip。鉴于您当前的结构，您可以使用以下内容：-

$('.flip').click(function() {
  $(this).next('.panel').slideToggle('slow'); 
});

Here's a simplified example of what you were trying to achieve