悬停时显示 MySQL 数据答案

【问题标题】：Display MySQL-Data on Hover悬停时显示 MySQL 数据
【发布时间】：2015-12-11 13:58:18
【问题描述】：

我的网站上有一个 MySQL output-script：

$db_projects = "rex_projects";

$sql = new rex_sql;

$sql->debugsql = 0; //Ausgabe Query

$sql->setQuery("SELECT * FROM $db_projects ORDER BY id");

for($i=0; $i < $sql->getRows(); $i++)
{

    $id = $sql->getValue("id");
    $projectname = $sql->getValue("projectname");
    $projectnumber = $sql->getValue("projectnumber");

    $print_projects .= '<div id="'.$id.'">'.$projectname.' has the number '.$projectnumber.'';

    $sql->next();
}

每个数据库元素都显示在具有上述格式的 div 中。

我想实现什么：

如果我悬停在一个 div 上，另一个 div（下面的代码）应该显示该元素的特定数据集。这可能吗？哪个最容易做到？

<div id="specific-informations">
    Projectname: <?php echo $projectname ?><br>
    Projectnumber: <?php echo $projectnumber ?>
</div>

【问题讨论】：

您当前的 php 不会出错吗？ <div id="'.id.'"> 不应该是 <div id="'.$id.'"> 吗？ id 前面缺少 $？

标签： javascript php jquery mysql database

【解决方案1】：

可以调用ajax函数并返回结果，然后在div中绑定对应的ajax数据。

【讨论】：

【解决方案2】：

你可以这样做：

在 $print_projects 中创建第二个 div

$print_projects .= <<<HTML
    <div id="$id" class="project">
        $projectname  has the number $projectnumber
        <div class="specific-informations">
            Projectname: $projectname<br>
            Projectnumber: $projectnumber
        </div>
    </div>
HTML;

在你的 CSS 中

.specific-informations { display: none; }
.project:hover .specific-informations { display: block }

【讨论】：

【解决方案3】：

尝试添加以下脚本：

$(document).ready(function(){$( "#specific-informations" ).hide();
});
$( "#getinfo" ).mouseover(function() {
    $( "#specific-informations" ).fadeIn(2000);
});
$( "#getinfo" ).mouseout(function() {
    $( "#specific-informations" ).fadeOut(2000);
});

Working Demo

【讨论】：

这不是我想要的结果。 div 一直显示。在 div 中应该出现特定的 MySQL 数据集。
如果悬停在 id 为 "3" 的 div 上，id 为 "specific-informations" 的 div 应该显示来自第三个 mysql-table 元素的所有数据集。
你想改变div的内容吗？
div里面的内容