jQuery mouseenter/mouseleave html()-swap 问题答案

【问题标题】：jQuery mouseenter/mouseleave html()-swap issuejQuery mouseenter/mouseleave html()-swap 问题
【发布时间】：2011-05-16 01:59:05
【问题描述】：

我有以下 Javascript/jQuery 函数：

function addEventHandler(){

    $("div").mouseenter(function() {
        $(this).html("Over");
    }).mouseleave(function() {
        $(this).html("Out");
    });

}

它有效，但并不完美。 div 有时会稍微重叠（不要问），并且正如下图试图传达的那样，它们并不总是得到“Out”值。尤其是当我将指针快速移到它们上方时会发生这种情况。

任何想法如何确保每个 div 在 mouseleave 上获得“Out”值？谢谢！

更新：真实代码摘录

由于我的真实函数不像上面的例子那么简单，所以我在这里包含了真实函数的确切代码：

function addEventHandlers(){

    var originalContent = "";

    $(".countryspots div").mouseenter(function() {

        var thisClass = $(this).attr("class");
        var thisCountry = thisClass.split(" ");
        var thisNumber = getNumber(thisCountry[1]);

        originalContent = $(this).children("a").html();

        $(this).children("a").html("<span>" + thisNumber + "</span>");


    }).mouseleave(function() {

        $(this).children("a").html(originalContent);

    });

}

而我的 HTML 标记是这样的：

<div class="countryspots">
    <div class="america brazil"><a href="#"><span>Brazil</span></a></div>
    <div class="america argentina"><a href="#"><span>Argentina</span></a></div>
    <div class="europe ireland"><a href="#"><span>Ireland</span></a></div>
    <div class="europe portugal"><a href="#"><span>Portugal</span></a></div>
</div>

一般的想法是，最里面的国家/地区名称 <span> 与代表员工的数字交换 mouseenter（从 getNumber(); 检索） - 然后交换回 mouseleave。

真正的问题是当我将指针移到另一个 div 上时，许多 div 会保留他们的员工编号。换句话说：mouseleave 事件不会在所有 div 上执行。

现场示例： http://jsfiddle.net/N9YAu/4/

希望这会有所帮助。再次感谢！

【问题讨论】：

标签： javascript jquery mouseleave mouseenter

【解决方案1】：

您的问题是，对于一个您只有一个变量来存储所有项目的“原始内容”，并且 mouseenter 处理程序可以在 mouseleave 处理程序之前第二次调用，导致值“原始content”变量将被悬停内容覆盖。

您应该在脚本开始时存储一次原始内容，并为每个项目单独存储它们。我在下面的例子中使用了 jQuery 的 data 函数：http://jsfiddle.net/N9YAu/5/

注意，我已将您单独的 mouseenter/mouseleave 绑定替换为一个 hover 绑定。最终可能是一样的，但这是“正确的方式”。

【讨论】：

Err .. 不完美 - 仍然有一些 div 没有触发退出事件。
^ 不要误会我的意思 - 你的建议带来了巨大的改进，但正如我所说的 - 如果我在 div 上快速移动指针，仍然会有一些人保留他们的数字。跨度>
我没有得到任何保留的号码。作为替代方案，您是否考虑过仅使用 CSS 的解决方案：jsfiddle.net/dstsZ
CSS 替代方案绝对是一个很好的解决方案，但由于不同的原因，对于这个项目来说并不是最优的。此外，这种效果应该适用于大约 100 个不同的重叠 div——我猜这就是为什么你没有在 jsfiddle 中得到这个错误，但我在我的项目中得到了这个错误。然而，这个错误现在是如此之小，以至于我可以忍受它。再次感谢老兄:)

【解决方案2】：

我无法重现该问题：

http://www.jsfiddle.net/N9YAu/1/

你也有这种情况吗？

【讨论】：

您的版本运行良好 - 我没有遇到同样的问题。但是，我的代码比上面的简化示例稍微高级一些。我会尽快更新问题...

【解决方案3】：

这些 div 中的任何一个是否会嵌套在 HTML 中的其他 div 中？

我在想这可能与鼠标指针进入顶级 div 然后在进入其他 div 时没有“离开”有关，因为它们是顶级 div 的孩子（即使它们已经被定位绝对）。

【讨论】：