Question

我有什么：

包含ID，姓名，职位，部门和地址的JSON。
同样的JSON有超过1000名随机员工循环到一张桌子。
每个人都有一个自定义属性（user_id）和相同的css类用于悬停。
在一名员工身上徘徊的一个隐藏的预备和样式的div。

我需要什么：

我需要在一些员工上面显示所有员工信息，如姓名，职位，部门和地址。请记住，悬停是有效的，但信息仍然是静态的。所以基本上，我的逻辑是当自定义attr user_id和JSON id匹配=填充html。我怎么能这样做？

＆＃13;

var xmlhttp = new XMLHttpRequest();
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);
        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;
}

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('.hoverKartX').hover(function(e) {
    //$(this).parent().find(".hoverKart").show();

    $(".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());
    }
});


});

＆＃13;

.hoverKart {
    position: absolute;
    width: 400px;
    height: 220px;
    border-radius: 25px;
    border: 1px solid #999;
    z-index: 1;
    display: none;
    background: #fff;
}

＆＃13;

<!-- hidden div-->
<div class="hoverKart">
    <div class="container">
        <div class="cardTop"><p><!-- JSON DATA (ID) --></p></div>
            <div class="imgHolder">
                <img class="employee" src="img/img.jpg" alt="employee image">
                <img class="eLogo" src="img/logo.jpg" alt="logo">
            </div>
            <div class="eInformation">
                <p class="eName"><!-- JSON DATA (NAME) --></p>
                <p class="ePos"><!-- JSON DATA (DEPARTMENT) --></p>
            <div class="eDep">
                <img src="img/icons-dep/5.png" alt="department logo">
            </div>
            <p class="eOp">Operations</p>
            <p class="eOp2"><!-- JSON DATA (ADDRESS) --></p>
            </div>
    </div>
</div>

<div id="employees"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

对于不同的答案，请直接道歉，因为它解决了这个问题的完全不同的方式，如下所示，

因为你的主要问题是你的＆＃34; hoverKartX＆＃34; jquery事件没有绑定到任何元素，因为你的html元素是从xmlhttp动态生成的，所以首先你需要确保你的事件在生成之后绑定到你的html元素，可能你需要重构你的代码并移动你的$（＆＃39; .hoverKartX＆＃39;）。hover（）...和$（＆＃39; .hoverKartX＆＃39;）。mousemove（）...在您的函数写入（arr）中，因为您已经连接了鼠标悬停mousemove事件在全局上下文中的代码，它将在页面加载时绑定到没有html元素，因为你使用xmlhttp动态生成这些元素，

然后在mousehover或mousemove事件中使用jquery的attr（如$（this）.attr（＆＃39; user_id＆＃39;））访问自定义html属性user_id，并执行您想要执行的任何操作。

Answer 2

我已经更新了你的代码并创建了一个小提琴：

检查working Fiddle。

$(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());
    }
});
}
//});
});

现有代码存在一些问题：

只有在hover方法执行完成后，才应将write方法绑定到字段。否则，它的工作将会不一致，具体取决于table的创建速度。

我希望，它会解决你的目的。

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

2 个答案: