перекручивание через DIV с идентификатором с помощью JQuery в PHP

Question

я вторя данные из базы данных, используя в то время как цикл в PHP, содержащий кнопку с «кнопкой» ид и DIV с «пароль» ид следующим образом:

$q = "select title,image,password from album"; 
$res = mysql_query($q); 
while($r = mysql_fetch_array($res)) 
{ 
echo " 
    <table cellspacing='5' cellpadding='10'> 
    <tr> 
    <td><img src='uploaded/titleimages/$r[1]' height='70px' width='70px'></td> 
    <td>$r[0]</br></br> 
    <input type='button' name='button' value='View Album' id='button'> 
    </td> 
    </tr> 
    <tr><td></td> 
    <td> 
    <div id='password'> 
    <form action='album.php' method='post'> 
    Password: 
    <input type='password' name='password' size='25'> 
    <input type='submit' name='submit' value='submit'> 
    </form> 
    </div> 
    </td> 
    </tr> 
    </table>"; 
} 

теперь DIV с идентификатором «паролем» отображается при щелчке на кнопке с помощью JQuery ниже

<script> 
$(document).ready(function(){ 
    $("#button").click(function(){ 
     $("#password").slideToggle("slow"); 
    }); 
}); 
</script> 

проблема заключается в том, что предположим, что есть 3 строки в базе данных, то содержимое внутри в то время как цикл выполняется 3 раза но Код jquery работает только для содержимого 1-й строки. Если нажать кнопку, появится div только для содержимого первой строки. Использование класса вместо id заставляет его работать на все. Короче, даже если используется id, как иметь отдельный идентификатор для каждого элемента, чтобы индивидуально изменять их, не меняя других?

Любая помощь?

Answer 1

ID элемента должен быть уникальным ... поэтому используйте атрибут класса для группировки подобных элементов.

Так вместо button и password использовать классы, как

<input type='button' name='button' value='View Album' class='button'></td> 
<div class='password'> 

затем

$(document).ready(function() { 
    $(".button").click(function() { 
     $(this).closest('table').find(".password").slideToggle("slow"); 
    }); 
}); 

Answer 2

Попробуйте изменить идентификаторы на классы (идентификаторы должны быть уникальными).

изменить Также ваш JQuery на:

<script> 
$(document).ready(function(){ 
$(".button").click(function(){ 
$(this).parents('table').find(".password").slideToggle("slow"); 
}); 
}); 
</script> 

Answer 3

Простой, используйте некоторый счетчик и прикрепить его, чтобы сделать идентификатор.

Например

$counter = 0; 
// Your while loop 

while(condition){ 

    // form class like this => class='password-{$counter}' instead of id='password' 

    $counter++; 
} 

В этом случае вы будете иметь отдельную идентичность для каждого элемента, т.е. идентификаторов будет выглядеть следующим образом:

password-0 
password-1 
password-2 
... 

После этого вы можете использовать цикл JQuery для перебора над элементами и выполнять любые задачи

Answer 4

Я, конечно, рекомендуем использовать PDO или MySQLi.

• Добавить класс в пароль и идентификатор как уникальный номер для каждого дел.
• Добавить класс для кнопки, как кнопки и ид, как уникальный номер мы дал в DIV

Вот код с вышеуказанными условиями:

$q="select title,image,password from album"; 
$num=0; 
$res=mysql_query($q); 
while($r=mysql_fetch_array($res)){ 
$num++; 
echo " 
<table cellspacing='5' cellpadding='10'> 
<tr> 
<td><img src='uploaded/titleimages/$r[1]' height='70px' width='70px'></td> 
<td>$r[0]</br></br> 
<input type='button' name='button' value='View Album' class='button' id='".$num."'></td> 
</tr> 
<tr><td></td><td> 
<div class='password' id='".$num."'> 
<form action='album.php' method='post'> 
Password: 
<input type='password' name='password' size='25'> 
<input type='submit' name='submit' value='submit'> 
</form> 
</div> 
</td> 
</tr> 
</table>"; 

и JQuery код:

$(document).ready(function(){ 
$(".button").click(function(){ 
    var id=$(this).attr('id'); 
    $(".password#"+id).slideToggle("slow"); 
}); 
}); 

Answer 5

Добавить classes своим button и div элементов,

Input=button-image и Div=password-image как,

<?php 

while($r=mysql_fetch_array($res)) 
{ 
    echo "<table cellspacing='5' cellpadding='10'> 
     <tr> 
      <td><img src='uploaded/titleimages/$r[1]' height='70px' width='70px'></td> 
      <td>$r[0]</br></br> 
      <input type='button' name='button' value='View Album' class='button-image'></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <div class='password-image'> 
        <form action='album.php' method='post'> 
         Password: 
         <input type='password' name='password' size='25'> 
         <input type='submit' name='submit' value='submit'> 
        </form> 
       </div> 
      </td> 
     </tr> 
    </table>"; 
} 
?> 

И Javascript использования этих classes как,

$(document).ready(function(){ 
    $(".button-image").click(function(){ 
     $("div.password-image").slideUp("fast");// first slide up other open password divs 
     $(this).closest('table').find("div.password-image").slideToggle("slow"); 
    }); 
}); 

Answer 6

Это поможет вам В PHP, сделайте somethinbg вот так ... поместите идентификатор результата в скрытое поле, а также в id.

$i=0; 
while($r=mysql_fetch_array($res)){ 
echo "<input type='button' id='button'".$i." value='something'>"; 
$i++; 
echo "<input type='hidden' id='hidden_id' value='".$i."'>"; 
} 

см, в скрытом значении это даст количество Теперь, вызов со скрытым значением для JQuery

<script> 
var count = $("#hidden_id").value(); 
for(var i=0;i<count;i++){ 
$("#button"+i).click(function(){ 
$("#password").slideToggle("slow"); 
}); 
} 

</script> 

использовать что-то вроде этого .. Надеюсь, это поможет вам.