Question

我有一个您输入名称的搜索框，并使用ajax显示匹配名称列表。我还有一个 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);
};

如何让弹出框显示div点击的值？

3 个答案: