如何获得此弹出框以显示单击的div的值？

Question

我有一个搜索框，您输入一个名称，然后使用ajax列出匹配名称。 我还有一个div ，该div随名称的弹出而弹出，另一个div弹出，显示该div与之匹配的人的名字。

这是我的代码：

PHP：

<?php
    require 'core.inc.php';
    require 'connect.inc.php';

if (!empty($_GET['letter'])) {
    $letter = $_GET['letter'];

    $query = "SELECT `first name`, `last name` FROM `users` WHERE `first name` LIKE '".$letter."%'";
    $query_run = mysql_query($query);

    while ($query_row = mysql_fetch_assoc($query_run)) {
        $first_name = $query_row['first name'];
        $last_name = $query_row['last name'];

        echo $first_name;
        echo " ".$last_name;    
?>
    <div id="popup" onclick="popup();"><input type="hidden" id="friend_name" name="friend_name" value="<?php print "$first_name"; print "$last_name"; ?>"></div> 
<?php
        }
    }
?> 

所有这些都有效，它将获取所有名称并将其列出。 林设置输入值等于名字和姓氏，所以我可以用JavaScript。

Javascript：

function popup() {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = document.getElementById('friend_name').value;
    popupboxHolder.appendChild(popupBox);
}; 

如果仅显示一个名字，这很好用，但是如果出现两个名字，而我单击第二个div ，则在弹出框中显示的是第一个人的名字，而不是第二个人的名字。

Answer 1

由于while循环，您有多个具有相同ID的div。 尝试将其与类名一起使用。

<div class="popup" onclick="popup();">

Answer 2

document.getElementById返回页面上具有给定id的第一个元素。

将为onclick函数提供当前单击元素的上下文。

这==当前点击的弹出div

您的代码应如下所示

function popup() {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = this.getElementsByTagName('input')[0].value;
    popupboxHolder.appendChild(popupBox);
}; 

Answer 3

你可以通过使用JavaScript元素的功能this避免这些麻烦：

<div class="popup" onclick="popup(this);">....</div>

然后，您可以从函数中访问被单击的元素

function popup(clickedelement) {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = clickedelement.getElementsByTagName('input')[0].value;
    popupboxHolder.appendChild(popupBox);
};