如何獲得此彈出框以顯示單擊的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);
};