php - 将 jquery slidetoggle 应用于 php 中一段时间​​的结果

Question

下面一段php代码，使用while语句输出变量$the_job_id。对于我想应用 jquery slidetoggle 的每个输出。问题是，在我的代码中，slidetoggle 仅适用于我 while 的第一个输出。不工作休息。知道我应该如何修改我的代码以使 slidetoggle 为我的每个 while 输出工作吗？

这是我的 php 代码:

<?php

$result = mysql_query("select * from `user_job` where `job_id` IN ($all_saved_job_id) ");

while($run_job = mysql_fetch_array($result)){

  $the_job_id = $run_job['job_id']; 

echo"<div id='flip'> PRESS TO SLIDE </div>";

echo"  <div id='panel'>  $the_job_id </div>";

}// end while

?>

这是我的脚本:

<script> 

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

</script>

这是我的CSS:

<style>

#flip{
cursor:pointer;
margin-left:100px;
}

#panel{
padding:0px;
display:none;
}       

</style>

Answer 1

id 必须是唯一的，否则您将始终获得页面中具有重复 id 的第一个元素，因此您需要改用 class:

echo"<div class='flip'> PRESS TO SLIDE </div>";

echo"  <div class='panel'>  $the_job_id </div>";

然后您可以使用 . 通过类名定位元素:

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next().slideToggle("slow");
    });
});

请注意，您还需要相应地使用 . 而不是 # 更改您的 CSS 选择器。