Php 启用jquery slideToggle（）可处理来自一段时间的多个输出

我用php编写了下面的代码，试图为每个youtube视频演示应用jquery slideToggle（）。我的问题是jquery slideToggle（）只适用于while语句中的第一个youtube视频演示。其余的人都不工作了。你知道怎么解决这个问题吗

<style>
#flip
{
padding:0px;
}

#panel
{
width:475px;
margin-left:3px;
margin-bottom:5px;
padding:4px;
display:none;
box-shadow: 0 0 20px rgba(0, 30, 10, 2.8);
-webkit-box-shadow: 0 0 20px rgba(0, 10, 0, 2.8);
-moz-box-shadow: 0 0 20px rgba(0, 10, 0, 2.8);
background-color:#363636;
}   
</style>


<script>
$(document).ready(function(){
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>


<?php

// above code

//next starts the while and outputs from my table all rows that contains users posts
// my code outputs all youtube links in a presentation format

while(){    


 $row['comment'] = preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i", "</br>

<div id='panel'>
<object width=\"0px;\" height=\"0px;\">
    <param name=\"movie\" value=\"http://www.youtube.com/v/$1&hl=en&fs=1\"></param>
    <param name=\"allowFullScreen\" value=\"true\"></param>
    <embed src=\"http://www.youtube.com/v/$1&hl=en&fs=1?&autoplay=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" width=\"475px;\" height=\"260px;\"></embed>
</object>       
</div>

 <table style='border:1px solid lightgrey;'>
 <td bgcolor='#EBEBEB' style='vertical-align:top;'>                 
   <div id='flip' style='cursor:pointer;'>
   <div id='container'><div id='img1'><img src='http://img.youtube.com/vi/$1/default.jpg'/></div><div id='img2'><img src='img/play-button.png' style='width:40px; height:40px;'/> </div></div>
   </div>
 </td>

 <td width='355px;' bgcolor='#EBEBEB' style='vertical-align:top;'>
  <font color='#363636'><b>$video_title</b></font><font color='#545454'></br><a href='http://www.youtube.com/watch?v={$id}' target='_blank'><font color='#69aa35'><b>Youtube.com</b></font></a> - $video_perigrafh...</font><font color='#949494'>[$view_count views]</font>
 </td>
 </table>", $row['comment']);


 }
?>

#翻转
{
填充：0px；
}
#面板
{
宽度：475px；
左边距：3倍；
边缘底部：5px；
填充：4px；
显示：无；
盒影：0.20px rgba（0,30,10,2.8）；
-webkit盒阴影：0 20px rgba（0,10,0,2.8）；
-moz盒阴影：0 20px rgba（0,10,0,2.8）；
背景色：#363636；
}   
$（文档）.ready（函数（）{
$（“#翻转”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
});
});

您使用的是一个id（#面板），id应该是唯一的。选择器基于本机GetElementByID，它返回第一个匹配项

您应该改用类（

）

-id与类目标的图解

编辑：如果您的HTML是：

<div class='panel'>
    ...
</div>
<table style='border:1px solid lightgrey;'>
    <tr>
        <td bgcolor='#EBEBEB' style='vertical-align:top;'>
            <div class='flip' style='cursor:pointer;'>
                ..
            </div>
        </td>
    </tr>
</table>

---

当然，您可以根据自己的需要进行调整。

好的，谢谢，我已将其改为课堂。现在的问题是，如果我点击第一个视频幻灯片，就会切换所有视频，而不仅仅是特定的视频。如果我点击其余的视频，也会发生同样的情况。你知道它应该如何只切换特定的视频吗？很抱歉反应太晚，请查看我的最新答案。非常感谢你出色的脚本。你为我节省了很多时间。这将帮助很多人看它！下面的代码与chrome完美结合。唯一的问题是，在IE上，当向上滑动时，它不会自动停止播放视频。你知道怎么解决这个问题吗？

$(document).ready(function(){
    $(".flip").click(function() {
        $(this).parents('table').prev('.panel').slideToggle("slow");
    });
});