применить jquery slidetoggle к результатам, поступающим в php

0

Следующая часть кода в php использует оператор while для вывода переменной $ the_job_id. Для каждого выходного файла я хочу применить slidetoggle jquery. Проблема в том, что в моем коде slidetoggle работает только для первого вывода моего while. Не работает для остальных. Любая идея, как я должен изменить свой код, чтобы slidetoggle работал для каждого из моих выходов?

Это мой 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>
  • 1
    id элементов должны быть уникальными на странице. Вместо этого используйте класс.
Теги:

1 ответ

1
Лучший ответ

id должен быть уникальным, иначе вы всегда получите первый элемент на странице с дублированным id, поэтому вам нужно будет использовать класс:

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 . вместо # соответственно.

Поделиться
  • 0
    я должен изменить свой CSS на .panel и .flip?
  • 0
    хорошо, но сейчас ничего не скользит вверх или вниз ... есть идеи, что может быть не так?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню