使jQuery的slideToggle（）工作来自一段时间的多个输出

Question

我有以下一段代码在PHP中，我试图应用jQuery的slideToggle（）为每个YouTube视频演示文稿。我的问题是，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']); 


} 
?> 

Answer 1

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

您应该改用类（<div class="panel">）。

http://jsfiddle.net/gLXLr/ - 标识VS类目标的说明

编辑：关于与类新的代码，如果你的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> 

用于切换的代码应该是：

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

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