我的MouseOut一直在重复。我怎么才能阻止它？

Question

我对Jquery比较陌生，所以如果我在解决这个相当简单的问题上遇到困难，请原谅。因此，我得到了一个任务，指定我应该专门使用MouseEnter和MouseOut函数编写翻转图像Jquery代码，用已经写入id属性的新图像src URL替换原始图像src URL。它还指定我应该保持原始的src URL在一个变量内使用later...so我这样做了…

这是我的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/