Question

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

//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个人并且您单击一个名称，则每个人都会填充信息。该信息对应于每个人，但我只想显示被点击的人的信息。

我认为这意味着我需要以某种方式唯一地识别每个班级，但似乎无法弄明白并使其发挥作用。或者也许有更好的方法来运行我的循环来解决问题。任何输入都表示赞赏。谢谢。

Answer 1

您可以使用HTML data-属性将每个button与div相关联。然后修改JavaScript以使用嵌入数据。

在下面的代码段中，我向数据库中填充data-uid的{{1}}和button添加了div个属性。

点击uid后，系统会读取button，并用于选择data-uid及相应的div。

我做的另一项小改进是将data-uid上的type属性更改为button。值button表示该按钮应用于提交与您在此处不同的表单。

submit

Answer 2

将您的.player和.player_info换成<div>，然后像JQuery一样切换：

$result = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_assoc($result)) {

        echo "<div class='player-container'>

        //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>";

        echo "</div>
    }  


$(document).ready(function(){

    // hide all of the player_info containers
    $(".player_info").hide();

    $(".player-container").click(function() {

        // this selects any child element of the clicked container with the 
        // classname .player_info and toggles it open or closed
        $(this).children(".player_info").slideToggle();

    });

});

Answer 3

您没有指定要切换的player_info，$('div.player_info')会选择所有这些。解决这个问题的一种快速而肮脏的方法是使用jQuery相对于按钮选择下一个兄弟，就像这样：

$(document).ready(function(){
    $('button.player').click(function(){
        $(this).next().toggle();
    });
});

jquery里面的一个声明

3 个答案: