Javascript jQuery用JSON数据动态填充准备好的HTML div

我所拥有的：

带有id、姓名、职位、部门和地址的JSON

同一个JSON将1000多名随机员工循环到一个表中

每个人都有一个自定义属性（user_id）和用于悬停的相同css类

当鼠标悬停在一名员工身上时，一个隐藏的准备好的和样式化的div，用于提供信息

我需要什么：

当我将鼠标悬停在某个员工上时，我需要显示所有员工信息，如姓名、职位、部门和地址。请记住，悬停正在工作，但信息仍然是静态的。所以基本上，我的逻辑是当自定义attr user_id和JSON id match=填充html时。 我该怎么做

var xmlhttp=new XMLHttpRequest（）；
变量url=”https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/189576/1743369/lDhMee0RoA1IO5D/generated.json";
var员工；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
employees=JSON.parse（this.responseText）；
写作（员工）；
}
};
open（“GET”，url，true）；
xmlhttp.send（）；
函数写入（arr）{
var i；
var out=''；
对于（i=0；i$（window.width（））{
$（“.hoverKart”）.css（“左”，“$（窗口）.width（）-$（“.hoverKart”）.width（））；
};
//防止“从页面底部掉落”
如果（（e.pageY+moveDown++$（“.hoverKart”）.height（））>（$（window.scrollTop（）++$（window.height（）））{
$（“.hoverKart”）.css（“顶部”，$（窗口）.height（）-$（“.hoverKart”）.height（）+$（窗口）.scrollTop（））；
}
});
});
.hoverKart{
位置：绝对位置；
宽度：400px；
高度：220px；
边界半径：25px；
边框：1px实心#999；
z指数：1；
显示：无；
背景：#fff；
}




操作


好吧，我为不同的答案道歉，因为解决这个问题的方式完全不同，如下所示

由于您的主要问题是“hoverKartX”jquery事件没有绑定到任何元素，因为您的html元素是从xmlhttp动态生成的，因此首先需要确保在生成事件后将事件绑定到html元素，可能需要重构代码并移动$（'.hoverKartX'）.hover（）。。。和$（'.hoverKartX'）.mousemove（）。。。在函数write（arr）中，您在全局上下文中附加了mousehover和mousemove事件的代码，在页面加载时不会绑定到任何html元素，因为您使用xmlhttp动态生成这些元素

然后在mousehover或mousemove事件中使用jquery的attr like$（this）.attr（'user\u id'）访问您的自定义html属性user\u id，并执行您想执行的任何操作…
好吧，对于不同的答案表示歉意，因为解决此问题的方法完全不同，如下所示

由于您的主要问题是“hoverKartX”jquery事件没有绑定到任何元素，因为您的html元素是从xmlhttp动态生成的，因此首先需要确保在生成事件后将事件绑定到html元素，可能需要重构代码并移动$（'.hoverKartX'）.hover（）。。。和$（'.hoverKartX'）.mousemove（）。。。在函数write（arr）中，您在全局上下文中附加了mousehover和mousemove事件的代码，在页面加载时不会绑定到任何html元素，因为您使用xmlhttp动态生成这些元素

然后在mousehover或mousemove事件中使用jquery的attr like$（this）.attr（'user\u id'）访问自定义html属性user\u id，并执行任何您想执行的操作…
我已经更新了您的代码并创建了一个fiddle:

检查一下

$（函数（）{
var xmlhttp=new XMLHttpRequest（）；
var myGlobalJson；
变量url=”https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/189576/1743369/lDhMee0RoA1IO5D/generated.json";
var员工；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
employees=JSON.parse（this.responseText）；
myGlobalJson=员工；
写作（员工）；
}
};
open（“GET”，url，true）；
xmlhttp.send（）；
函数写入（arr）{
var i；
var out=''；
对于（i=0；i$(function(){
var xmlhttp = new XMLHttpRequest();
var myGlobalJson;
var url = "https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/189576/1743369/lDhMee0RoA1IO5D/generated.json";
var employees;
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        employees = JSON.parse(this.responseText);
        myGlobalJson = employees;
        write(employees);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();




function write(arr) {
    var i;
    var out = '<table>';
    for(i = 0; i < arr.length; i++) {
        out += '<tr>';
        out += '<td class="hoverKartX" user_id="' + arr[i].id + '">' + arr[i].name + '</td>';
        out += '<td>' + arr[i].position + '</td>';
        out += '</tr>';
    }
    out += '</table>';
    document.getElementById('employees').innerHTML = out;
    bindMethods();
}

//$(function() {
function bindMethods(){
  var moveLeft = 20;
  var moveDown = 10;

  $('.hoverKartX').hover(function(e) {
    //$(this).parent().find(".hoverKart").show();
        var currentUserId = parseInt(($(this).attr('user_id')));
    //console.log(myGlobalJson);
    //console.log(typeof  parseInt($(this).attr('user_id')));
    $.each(myGlobalJson, function(i, item) {
      //console.log($(this).attr('user_id'));
    if(item.id === currentUserId){
      $(".hoverKart .cardTop").html(item.id);
      $(".hoverKart .eName").html(item.name);
      $(".hoverKart .ePos").html(item.position);
      $(".hoverKart .eOp2").html(item.address);  
      return false;
    }
});

    $(".hoverKart").show();
  }, function() {
    $('.hoverKart').hide();
  });

  $('.hoverKartX').mousemove(function(e) {
    $(".hoverKart").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);

    // preventing 'falling' to the right on smaller screen
    if ($(".hoverKart").position()['left'] + $('.hoverKart').width() > $(window).width()) {
        $(".hoverKart").css("left", $(window).width() - $(".hoverKart").width());
    };

    // preventing 'falling from the bottom of the page'
    if ((e.pageY + moveDown + $(".hoverKart").height()) > ($(window).scrollTop() + $(window).height())) {
      $(".hoverKart").css("top", $(window).height() - $(".hoverKart").height() + $(window).scrollTop());
    }
});
}
//});
});