0

我有一个搜索框，您可以输入一个名称，然后使用 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，第一个人的名字会出现在弹出框中，而不是第二个人的名字。

4

3 回答 3

0

您可以使用 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);
};
于 2013-10-08T02:23:30.593 回答
0

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

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

于 2013-10-08T02:17:25.853 回答
0

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

onclick 函数被赋予当前点击元素的上下文。

this == 当前点击的弹出 div

你的代码应该是这样的

function popup() {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = this.getElementsByTagName('input')[0].value;
    popupboxHolder.appendChild(popupBox);
};
于 2013-10-08T02:19:19.393 回答