My MouseOut продолжает повторяться. Как остановить его?

Question

Я относительно новичок в JQuery, поэтому простите меня, если у меня возникнут проблемы с выяснением этой довольно простой проблемы. Поэтому мне было дано указание, что я должен написать код JQuery для опрокидывания, используя специально функции MouseEnter и MouseOut, чтобы заменить исходный URL-адрес src изображения новым, уже записанным в атрибуте id. Кроме того specifices, что я должен сохранить оригинальный Src URL в вар, чтобы использовать позже ... так что я сделал это ...

Heres мой 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> 

Heres мой 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/