我正在尝试创建一个下拉菜单,该菜单显示有关单击该人时显示的每个人的更多信息。
//Get users information
$sql = "SELECT user.uid, user.first, user.last, user.email, user.rating
FROM user
INNER JOIN team_members ON user.uid=team_members.uid
WHERE tid = '$tid'
ORDER BY user.last ASC";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
//name as button(displayed on page load)
echo "<button class='player' type='submit'>
".$row["first"]." ".$row["last"]."</button><br>";
//hidden information to be shown once button clicked
echo "<div class='player_info' style='display:none'>
".$row["email"]." ".$row["rating"]."
</div>";
}
$(document).ready(function(){
$('button.player').click(function(){
$('div.player_info').toggle();
});
});
我遇到的问题是,单击它时会显示每个循环中的所有信息。因此,如果有 5 个人并且您单击一个姓名,则每个人都会填充信息。信息对应于每个人,但我只想显示点击的人的信息。
我认为这意味着我需要以某种方式唯一地标识每个类,但似乎无法弄清楚并使其工作。或者也许有更好的方法来运行我的循环来解决问题。任何输入表示赞赏。谢谢你。
您可以使用HTMLdata-
属性每个相关button
的div
。然后修改 JavaScript 以使用嵌入的数据。
在下面的代码片段,我添加data-uid
属性,同时button
与div
被填充了uid
从数据库中。
当button
被点击,data-uid
被读取并用来选择div
相应data-uid
。
我所做的另一个小改进是将type
属性更改button
为button
. 值submit
意味着该按钮应该用于提交一个表单,这不是您在此处所做的。
//Get users information
$sql = "SELECT user.uid, user.first, user.last, user.email, user.rating
FROM user
INNER JOIN team_members ON user.uid=team_members.uid
WHERE tid = '$tid'
ORDER BY user.last ASC";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
//name as button(displayed on page load)
echo "<button class='player' type='button' data-uid='".$row["uid"]."'>
".$row["first"]." ".$row["last"]."</button><br>";
//hidden information to be shown once button clicked
echo "<div class='player_info' style='display:none' data-uid='".$row["uid"]."'>
".$row["email"]." ".$row["rating"]."
</div>";
}
$(document).ready(function(){
$('button.player').click(function(){
$('div.player_info[data-uid='+$(this).attr('data-uid')+']').toggle();
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句