Question

我在数据库中使用while循环来回显数据，其中包含一个带有'button'id的按钮和一个带有'password'id的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>";
}

现在使用下面的jquery单击按钮时可以看到带有id'密码'的div

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

问题是假设数据库中有3行，那么while循环中的内容执行3次但jquery代码仅适用于第1行的内容。单击按钮div只显示为第一行内容。使用class而不是id使它适用于所有。即使使用id，如何为每个元素分别修改它们而不改变其他元素？

任何帮助？

Answer 1

尝试将id更改为类（ID必须是唯一的）。

同时将您的jquery更改为：

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

Answer 2

简单，使用一些计数器并附上它来制作一个id。

例如

$counter = 0;
// Your while loop

while(condition){

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

   $counter++;
}

通过这种方式，每个元素都有一个单独的标识，即id将是这样的：

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

之后，您可以使用jquery循环迭代元素并执行任何类型的任务

Answer 3

元素的ID必须是唯一的...所以使用class属性对相似的元素进行分组。

因此，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 4

我当然建议您使用 PDO 或 MySQLi 。

将课程添加为密码，并将ID作为每个div的唯一编号。
将按钮的类添加为按钮，并将ID作为我们的唯一编号给了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中，像这样做一些事情...把结果的id放在隐藏字段中，也放到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>

使用类似的东西..希望，这会对你有帮助。

在php中使用jquery循环遍历带有id的div

6 个答案: