jquery - jQuery 中的弹出窗口

Question

我有一段代码可以正常工作，但是现在，当我尝试重写我的脚本时，突然我得到了错误的弹出窗口的 X 和 Y 位置。 这是第一个问题。

下一个问题是这段代码非常糟糕，因为我在显示弹出窗口时总是遇到一些错误。有点难解释，你最好看一下代码。

最主要的是:a有一个元素(比如说一张图片)，当鼠标悬停触发时，我需要在鼠标悬停在窗口上方时保持窗口显示。换句话说 - 我必须能够从那个窗口复制一些信息。所以我写了一段代码，但它有很多错误，现在除了错误之外，我得到了错误的 X 和 Y 位置。看:

    $(".infoBox").die();
$(".infoBox").live('mouseover mouseout', function(e) {
    if (e.type == 'mouseover') {
        $("#infoBox").html("");
        $("#infoBox")
          .css('top', (e.pageY - 10) + 'px')
          .css('left', (e.pageX - 20) + 'px');

        setTimeout(showInfoBox, 500);

        ID = $(this).attr('id');    

        if ($(this).hasClass("companyInfo"))    { showCompanyInfo(ID); }
        if ($(this).hasClass("userInfo"))       { showUserInfo(ID);    }

    } else {
        setTimeout(hideInfoBox, 1000);
    }
});

function showInfoBox() {
    $("#infoBox").fadeIn('slow');
}

function hideInfoBox() {
    if (mouse_in_infoBox == 0) {
        $("#infoBox").hide();
        $("#infoBox").html("");
    }
};

$("#infoBox").hover(
    function() {
        mouse_in_infoBox = 1;
    },
    function() {
        mouse_in_infoBox = 0;
        setTimeout(hideInfoBox, 1000);
    }
);

例如，我有

<img class="infoBox" id="company_id_which_was_dynamically_added">

并且 showCompanyInfo 有

"$("infoBox").html(...)". 

在我的index.php中我得到了，CSS是:

#infoBox {
display: none;
position: absolute;
border: 1px solid #CDFF00;
background-color: #1C1F1A;
color: #CCCC33;
padding: 10px;
z-index: 5;
max-width: 400px;
min-width: 50px;
min-height: 50px;
}

啊，是的，另一个问题是关于live和die方法的。在我的网站中，我有很多选项卡，当我切换它们时，我在某些元素上放置了 .click/.hover 等处理程序。这里我使用 .live 方法，因为我的选项卡使用 ajax。但是当我多次切换选项卡时，我得到了相同的几个处理程序，例如，如果我显示一个灯箱，我会得到几个灯箱。现在我在.live()之前使用.die()，但似乎这根本不是一个好的解决方案......

我真的很感激任何帮助，因为我多次尝试制作这些弹出窗口，但总是遇到一些错误。在我上面的代码中，如果您单击鼠标移动，您将得到空窗口和其他不好的东西。

提前致谢!

Answer 1

这里有一些事情似乎不正确，但如果不查看更多代码并获取更多信息，很难准确判断发生了什么。您使用的是哪个版本的 jQuery，您在哪些浏览器中遇到问题，以及该问题是在所有浏览器上都存在还是仅在特定浏览器上存在？

根据the jQuery website live() 从版本 1.7 开始已被弃用，并且 on() event handler应该使用。也许您的问题与使用实时处理程序有关。

可以解决不正确的 pageX 值的另一件事是检查 e.pageX 实际上是一个整数(可以使用 parseInt(e.pageX, 10) 来确保它是一个整数)。我遇到了一些奇怪的问题，变量应该是整数，但由于某种原因最终变成了字符串。现在我确保将所有整数声明为整数(使用 parseInt())并且不允许 javascript 自行决定。

此外，这部分代码没有任何意义:

$("#infoBox").hover(
    function() {
        mouse_in_infoBox = 1;
    },
    function() {
        mouse_in_infoBox = 0;
        setTimeout(hideInfoBox, 1000);
    }
);

mouse_in_infoBox 的值始终为 0。

我发现的另一个问题是您的 infoBox 选择器不一致。 infoBox 是一个类 $('.infoBox') 还是一个 id $('#infoBox')？根据您上面提供给我们的代码，您有许多不正确的选择器。对 infoBox 的任何引用都应该是 $('.infoBox') 而不是 $('#infoBox')。另外，您的 CSS 也适用于 id #infoBox，因此不确定这是否是有意的。

希望这有帮助。