Javascript 将悬停工具提示附加到循环中的特定div

我试图通过AJAX获得一个工具提示（div）来显示信息。以下是执行此操作的函数：

function coworkerDetail(post, delay) {
    if(delay == 1) {
        clearInterval(TipTimer);
    } else {
        TipTimer = setInterval(function(){

            var msgType = 'person-container';
            // The position to be increased
            var height = 58;
            var left = 20;

        // Start displaying the profile card with the preloader
        $('.coworker-detail').show();
        $('.coworker-detail').html('<div class="loading"><div class="loading-dot"></div><div class="loading-dot"></div><div class="loading-dot"></div><div class="loading-dot"></div></div>');

        $.ajax({
            type: "POST",
            url: "",
            cache: false,
            success: function(html) {
                $('.coworker-detail').html('Info goes here');
            }
        });
        clearInterval(TipTimer);
        }, 500);
    }
}

功能同事详细信息（post、延迟）{
如果（延迟==1）{
clearInterval（TipTimer）；
}否则{
TipTimer=setInterval（函数（）{
var msgType=‘人员容器’；
//需要增加的职位
var高度=58；
左向量=20；
//使用预加载程序开始显示配置文件卡
$（'.coworker detail'）.show（）；
$（'.coworker detail'）.html（''）；
$.ajax({
类型：“POST”，
url:“”，
cache:false，
成功：函数（html）{
$（'.coworker detail'）.html（'信息在这里'）；
}
});
clearInterval（TipTimer）；
}, 500);
}
}

但是，我需要仅为我在循环中悬停的特定person容器div显示工具提示：

$.each(obj.DATA, function( indexInArray, value ) {

    var topConnectedHtml = '<div class="person-container">' + 
    '<div class="headshot">' +
        '<div class="initials">' + firstinitial + lastinitial + 
        '</div>' +
    '</div>' +
    '<div class="hover-wrapper" onmouseover="coworkerDetail(1, 0)" onmouseout="coworkerDetail(0, 1);" onclick="coworkerDetail(0, 1);">' + 
        '<div class="name">' + value[firstNameIndex] + ' ' + value[lastNameIndex] + '</div>' +
        '<div class="title">' + value[titleIndex] + '</div>' +
    '</div>' +
    '<div class="coworker-detail">' +
    '</div>' +

$。每个（对象数据、函数（索引数组、值）{
var topConnectedHtml=''+
'' +
''+firstinitial+lastinitial+
'' +
'' +
'' + 
''+值[firstNameIndex]+''+值[lastNameIndex]+''+
''+值[标题索引]+''+
'' +
'' +
'' +

---

当前，当我将鼠标悬停在任何person容器上时，它会返回所有person容器的所有工具提示。我需要选择它悬停的特定工具。

在悬停的对象上添加id属性

<div id="'+id+'" class=".hoverClass">

---

如果.hover包装始终伴随着detail div，则可以传递如下引用：

 onmouseover="coworkerDetail(this, 1, 0)"

然后将您的同事详细信息功能更改为：

function coworkerDetail(el, post, delay) {

然后，不要使用：

$('.coworker-detail')

得到

---

并使用它。这将找到与悬停元素关联的.coworker detail div。

很好，但也许可以告诉OP他的初始代码没有按预期工作的原因；最好是使用

$（'.coworker details'）。on（'mouseover'，function（）{$（This）将其附加到所有的coworker详细信息..//do stuff

。当我实现这个时，我什么也没有得到。当我做一个console.log（“test”，detail）时，我得到的是：[prevObject:e.fn.init[0]，context:undefined，jquery:“1.9.1”，构造函数：function，init:function…]我不确定你对console.log到底说了些什么，但我确实注意到了我修复的答案中的一个错误，我在上创建了一个示例Fiddle。到目前为止，这是实现OP想要的最低效的方法（每个类都需要一个ID）。

$('.coworker-detail')

var detail = $(el).siblings('.coworker-detail').first();