Question

我试图让工具提示（div）通过AJAX显示信息。以下是将要执行的功能：

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);
    }
}

但是，我需要工具提示只显示我在循环中悬停的特定person-container 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>' +

目前，当我将鼠标悬停在任何人员容器上时，它会为所有人员容器带回每个工具提示。 我需要选择它悬停的具体内容。

Answer 1

如果您的.hover-wrapper始终伴随详细div，您可以传递类似的参考：

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

然后将您的coworkerDetail函数更改为：

function coworkerDetail(el, post, delay) {

然后而不是使用：

$('.coworker-detail')

获取

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

然后使用它。这将找到一个.coworker-detail div与hover元素一起使用。

Answer 2

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

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

然后您就可以在悬停事件

中请求此ID

$('.hoverClass').hover(function(){
    var idHovered = $(this).attr('id');
    //do your post here with specified id
    //then you can output data within the correct object id
});

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

2 个答案: