在while语句中的jquery

BL10

我正在尝试创建一个下拉菜单,该菜单显示有关单击该人时显示的每个人的更多信息。

//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-属性每个相关buttondiv然后修改 JavaScript 以使用嵌入的数据。

在下面的代码片段,我添加data-uid属性,同时buttondiv被填充了uid从数据库中。

button被点击,data-uid被读取并用来选择div相应data-uid

我所做的另一个小改进是将type属性更改buttonbutton. 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章