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

I have a script that is currently printing out a list from a mysql table. I am trying to add some javascript to add more interactivity ti the page. My current script has the javascript function working for the top record only. I know I have to change the div id to a div class but what other changes do I need to make to my script to get the javascript to function on all records?

我有一个脚本,当前正在从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>

1 个解决方案

#1

Yes you should change IDs to class names and since the element you want to slide is after element you click on you need to use this approach:

是的,您应该将ID更改为类名,并且因为您要滑动的元素是在您单击的元素之后,您需要使用此方法:

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

or you can use .next() without selector:

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

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

#1