javascript - jQuery mouseenter/mouseleave html()-交换问题

Question

我有以下 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/

希望这对您有所帮助。再次感谢!

Answer 1

你的问题是，你只有一个变量来存储所有项目的“原始内容”，而且 mouseenter 处理程序可以在 mouseleave 处理程序，导致值“原始内容”变量被悬停内容覆盖。

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

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