jquery preloaded imgages with rollovers

Так что я делаю что-то очень простое, что можно сделать с помощью CSS, но я хочу сделать это с помощью jQuery, чтобы ознакомиться с библиотекой.jquery preloaded imgages with rollovers

Я пытаюсь создать галерею изображений опрокидывания. Где, когда вы наводите мышь на изображение, она будет заменена слегка отредактированной версией.

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jQuery</title> 
<script src="jquery-1.9.1.js"></script> 
<style> 

</style> 
</head> 
<body> 
<div id="gallery"> 
    <a href="#"><img src="images/one_s.jpg" /></a> 
    <a href="#"><img src="images/two_s.jpg" /></a> 
    <a href="#"><img src="images/three_s.jpg" /></a> 
    <a href="#"><img src="images/four_s.jpg" /></a> 
    <a href="#"><img src="images/five_s.jpg" /></a> 
    <a href="#"><img src="images/six_s.jpg" /></a> 
</div> 
<script> 
$(document).ready(function(){ 

    var alternate = ['images/one_s_edited.jpg', 
        'images/two_s_edited.jpg', 
        'images/three_s_edited.jpg', 
        'images/four_s_edited.jpg', 
        'images/five_s_edited.jpg', 
        'images/six_s_edited.jpg']; 

    var $selection = $("#gallery img"); 

    for(var i = 0; i < alternate.length; i++) 
    { 

     var imgObject = new Image(); 

     var downloadedImg = imgObject.src = alternate[i]; 

     console.log(downloadedImg); 

     var originalSrc = $selection.eq(i).attr("src"); 

     console.log(originalSrc + "\n"); 

     $selection.eq(i).hover(
      function(){ 
       $(this).attr("src", downloadedImg); 
      }, 
      function(){ 
       $(this).attr("src", originalSrc); 
      } 
     );//End hover 

    }//End loop 
});//End ready 
</script> 
</body> 
</html>

Вот ссылка на конечный результат: link

Как вы можете видеть, что зашкаливает, но не как планировалось. Он заканчивается последним снимком опрокидывания и не возвращается обратно к оригиналу и не показывает соответствующее изображение опрокидывания, соответствующее ему.

Любые простые предложения без использования регулярных выражений?

источник

2013-12-10 Robert Rocha

вашего ответа лежит в https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake –

Классическими проблема с каждым замыканием, использующим одну и ту же переменную. Около миллиона дубликатов на переполнение стека. Вы должны предоставить каждую итерацию уникальной копией скачанных файлов и оригиналов. – meagar

Спасибо за статью @ArunPJohny no Я понимаю проблему 100% –

Проблема заключается в неправильном использовании переменной замыкания в цикле.

Но решение может быть упрощено до

$(document).ready(function() { 
    var $selection = $("#gallery img"); 
    $selection.hover(function() { 
     this.src = this.src.replace('.jpg', '_edited.jpg') 
    }, function() { 
     this.src = this.src.replace('_edited.jpg', '.jpg') 
    }) 
}); //End ready

источник

2013-12-10 03:30:04

Как мне привязать это ко всем элементам в выборе? –

@robertrocha извините, я вас не понял .. что вы хотите сделать? –

Как связать обработчики событий со всеми разными изображениями при перетаскивании мыши? –

ответ

Смежные вопросы