jQuery mouseenter / mouseleave html（） - 交换问题 [英] jQuery mouseenter/mouseleave html()-swap issue

问题描述

我有以下Javascript / jQuery函数：

I have the following Javascript/jQuery function:

function addEventHandler(){

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

}

它有效但不完美。 div有时会略微重叠（不要问），并且如下图所示，它们并不总是得到Out值。特别是如果我将指针快速移动到它们上面就会发生这种情况。

It works, but not perfectly. The divs sometimes overlap slightly (don't ask), and as the picture below tries to convey they don't always get the "Out" value. This happens especially if I move the pointer over them very fast.

如何确保每个div在mouseleave上获得Out值？谢谢！

Any ideas how to make sure every div gets the "Out" value on mouseleave? Thanks!

更新：真实代码摘录

因为我的真实功能不是'和上面的例子一样简单，我在这里包含了实函数的确切代码：

As my real function isn't quite as simple as the example above, I've included the exact code of the real function here:

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标记是这样的：

And my HTML markup is like this:

<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 。

The general idea is that the country name in the inner most <span> is swapped with a number representing employees on mouseenter (retrieved from getNumber();) - then swapped back on mouseleave.

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

The real problem is that many divs retain their employee number when I move the pointer onto another div. In other words: the mouseleave event is not executed on all divs.

实例： http://jsfiddle.net/N9YAu/4/

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

Hope this helps. Thanks again!

推荐答案

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

Your problem is that for one you only have one variable to store the "original content" for all items, and also the mouseenter handler can be called a second time before the mouseleave handler, causing the value "original content" variable to be overwritten by the hover content.

您应该在脚本开头存储一次原始内容，并为每个项目分别存储它们。我使用jQuery的数据函数在followign示例中完成了这个： http://jsfiddle.net/N9YAu/5/

You should store the original contents once at the start of the script and store them separatly for each item. I've done this in followign example using jQuery's data function: http://jsfiddle.net/N9YAu/5/

注意，我已经更换了单独的 mouseenter / mouseleave 绑定一个 hover 绑定。它最终可能是相同的，但这是正确的方法。

NB, I've replace your separate mouseenter/mouseleave bindings with one hover binding. It's probably the same in the end, but it's the "proper way" to do it.

这篇关于jQuery mouseenter / mouseleave html（） - 交换问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！