Question

我对Jquery比较新，所以请原谅我，如果我无法弄清楚这个相当简单的问题。所以我得到了一个分配，指定我应该使用专门的MouseEnter和MouseOut函数编写一个翻转图像Jquery代码，用原来的图像src URL替换已经写入id属性的新图像。它还规定我应该将原始src URL保存在var中以便稍后使用...所以我这样做了......

继承我的HTML

<section>
    <h1>Ram Tap Combined Test</h1>
    <ul id="image_rollovers">
        <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
        <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
        <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
    </ul>        
</section>

继承我的Jquery

$("#image_rollovers img").each(function() {
    var newSrc;
    var oldSrc;
    $("img").mouseenter(function(){
        oldSrc = $(this).attr("src");
        newSrc = $(this).attr("id");    
        $(this).stop().attr("src", newSrc);

    })  
    $("img").mouseout(function(){
        alert("moving out")
        alert(oldSrc);
        $(this).stop().attr("src", oldSrc);
    }); 
});

所以我做了这个并且mouseenter功能正常，但是mouseout重复了3次，当它完成时，图像不会恢复到原来的src。我似乎无法弄清楚为什么这样做。我尝试过使用stop（）但它并没有停止重复过程。任何帮助将不胜感激！

Answer 1

所以问题是，当你在#image_rollovers img上进行迭代时，每次都会为每个图像标记添加mousout处理程序。因此，对于3个图像，您将添加处理程序3次。我创建了一个带有更正解决方案的fiddle。

基本上你想把你的循环改为：

$("#image_rollovers img").each(function(i, e) {
    var elem = $(e);
    var newSrc;
    var oldSrc;
    elem.mouseenter(function(){
        oldSrc = $(this).attr("src");
        newSrc = $(this).attr("id");    
        $(this).stop().attr("src", newSrc);
    });  
    elem.mouseout(function(){
        alert("moving out")
        alert(oldSrc);
        $(this).stop().attr("src", oldSrc);
    }); 
});

它的作用是获取元素elem并为每个图像分配mouseEnter和mouseOut处理程序。

Answer 2

使用mouseleave

$("img").mouseleave(function(){
        alert("moving out")
        alert(oldSrc);
        $(this).attr("src", oldSrc);
    });

不要在循环中绑定您的事件，请尝试以下

$("img").on('mouseenter mouseleave',function(){
        oldSrc = $(this).attr("src");
        newSrc = $(this).attr("id");    
        $(this).attr("src", newSrc);
         $(this).attr("id", oldSrc);

    });

https://jsfiddle.net/g1h3xwyq/

我的MouseOut不断重复。我该如何阻止它？

2 个答案: