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

2023年3月20日 205次阅读

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

希望这可以帮助.再次感谢！

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

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

注意,我用一个悬停绑定替换了你单独的mouseenter / mouseleave绑定.它最终可能是相同的,但这是“正确的方法”.

点赞