javascript - 如何将此 javascript 从 div id 更改为类 ID

Question

我有一个脚本，当前正在从 mysql 表中打印出一个列表。我正在尝试添加一些 javascript 以增加页面的交互性。我当前的脚本具有仅适用于最高记录的 javascript 函数。我知道我必须将 div id 更改为 div 类，但我还需要对我的脚本进行哪些其他更改才能让 javascript 在所有记录上运行？

    #panel,#flip
    {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    #panel
    {
    padding:50px;
    display:none;
    }
    -->
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script> 
   $(document).ready(function(){
   $("#flip").click(function(){
   $("#panel").slideToggle("slow");
   });
   });
   </script>

  </head>


  <?php

  mysql_connect("localhost","blah","password") or die (mysql_error());
  mysql_select_db("this_one") or die (mysql_error());

 $sql = mysql_query("SELECT * FROM contacts ");

 $nr = mysql_num_rows($sql); 
 if (isset($_GET['pn'])) { 
 $pn = preg_replace('#[^0-9]#i', '', $_GET['pn']); 
 } else { 
 $pn = 1;
 } 

 $itemsPerPage = 15; 

 $lastPage = ceil($nr / $itemsPerPage);

if ($pn < 1) { 
    $pn = 1; 
} else if ($pn > $lastPage) { 
    $pn = $lastPage; 
} 

 $centerPages = "";
 $sub1 = $pn - 1;
 $sub2 = $pn - 2;
 $add1 = $pn + 1;
 $add2 = $pn + 2;
  if ($pn == 1) {
  $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
   $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 .       '</a> &nbsp;';
     } else if ($pn == $lastPage) {
     $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 .   '</a> &nbsp;';
     $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
} else if ($pn > 2 && $pn < ($lastPage - 1)) {
 $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub2 . '">' . $sub2 .   '</a> &nbsp;';
 $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
 $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
 $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
 $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add2 . '">' . $add2 . '</a> &nbsp;';
} else if ($pn > 1 && $pn < $lastPage) {
$centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a>        &nbsp;';
 $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
 $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 .     '</a> &nbsp;';
 }

  $limit = 'LIMIT ' .($pn - 1) * $itemsPerPage .',' .$itemsPerPage; 

  $sql2 = mysql_query("SELECT * FROM contacts  "); 

 $paginationDisplay = ""; 

if ($lastPage != "1"){

$paginationDisplay .= 'Page <strong>' . $pn . '</strong> of ' . $lastPage. '&nbsp;  &nbsp;      &nbsp; ';

if ($pn != 1) {
    $previous = $pn - 1;
    $paginationDisplay .=  '&nbsp;  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $previous . '">        Back</a> ';
} 

$paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>';


}



$outputList = '';
while($row = mysql_fetch_array($sql2)){ 

 $name = $row["name"];
 $Description = $row["Description"];


$outputList .= '<span class="style40">' . $name . '</span class> <br>

<div id="flip">Click for more information on ' . $name . ' </div>
<div id="panel">' . $Description . '</div><br>



' . $pedigree . '<hr />';

} 
?>
      <div style="margin-left:5px; margin-right:5px;"> 
        <p><br>
        <div style="margin-left:0px; margin-right:0px;"><?php print "$outputList"; ?></div>
      <br>
        </p>
    </div></td>

Answer 1

是的，您应该将 ID 更改为类名，并且由于您要滑动的元素位于您单击的元素之后，因此您需要使用这种方法:

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

或者您可以使用不带选择器的 .next():

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