javascript - 如何通过 id on live 加载特定的 php 文件以显示在悬停 div 上

Question

我制作了一个更新侧边栏，它在 10 秒间隔后加载新闻。

现在我想，当我将鼠标悬停在侧边栏的信号新闻上时，它会在侧边栏中显示完整的故事，而该侧边栏会从特定的 php 文件(例如 news.php?id=".$id."

我的悬停 div 运行良好并显示了一个 div，但我无法理解如何通过 id 在此处加载实时完整故事

再次清除；如何通过 id 实时加载特定的 php 文件以显示在悬停 div 上

我想做类似 facebook 右侧栏自动收报机的事情。在悬停特定帖子时显示完整故事。

我的 js

$(".upbox1").mouseover(function() {
  var pos = $(this).position();
  var width = $(this).outerWidth();
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.right + width) + "px"
    }).fadeIn("slow");
});
  $("#menu").mouseout(function() {
    $("#menu").fadeOut("slow");
  });
  $("body").click(function() {
    $("#menu").fadeOut("slow");
  });

下面是我的悬停 div。

echo'<div class="popup" id="menu">';
  // Full story will goes here from news.php?id=xxxxx
echo'</div>';

Answer 1

$(".upbox1").mouseover(function() {
    var id = $(this).attr("data-href"); //for example, put a data-href attr in your class with the id of the post
    $.get("php_file.php?id="+id, function(data) {
        //data is what php_file will return
        $(".menu").html(data); //this inserts into the class menu the data that the php file gave you
    });
});

在 php 文件中，对数据库使用查询并检索信息。并回显你想要的所有数据，例如:

$myData = "<div>".$data['title']."</div>";
$myData .= "<div>".$data['description']."</div>";
echo $myData;