JS: Image rollover

Question

Я пытаюсь заменить src img на id img, используя событие mouseover в jQuery. Однако моя консольная ошибка говорит о том, что $ (...) имеет значение NULL.

Может ли кто-нибудь помочь мне, пожалуйста? Спасибо.

Вот мой проект:

var $ = function (id) { 
    return document.getElementById(id); 
} 

window.onload = function() { 
var listNode = $("#image_rollovers img"); 
    $(document).ready(function() { 
     listNode.each(function() { 
      var oldURL = $(this).attr("src"); 
      var newURL = $(this).attr("id"); 

      var rolloverImage = new Image(); 
      rolloverImage.src = newURL; 
      $(this).hover(
       function() { 
        $(this).attr("src", newURL); 
       }, 
       function() { 
        $(this).attr("src", oldURL); 
       } 
); 
}); 
}); 
} 

https://jsfiddle.net/rn70Lqrr/

Answer 1

у вас есть

listNode = $("image_rollovers"); 

должно быть

listNode = $("#image_rollovers"); 

вам не хватает на '#'

Насколько я могу сказать, что есть JS файл отсутствует в вашей скрипке:

<script src="rollover.js"></script> 

Answer 2

Существует много ненужного код в вашем JavaScript. Я обновил JFiddle для решения проблем. В принципе функция id не нужна, JQuery необходимо включить. вы пытались перебрать объект списка, когда то, что вы действительно хотели сделать, было петлей над изображениями.

вот ссылка на обновленной скрипку:

https://jsfiddle.net/tuboaLnd/2/

и вот обновленный Jquery код:

$(document).ready(function() { 
    var listNode = $("#image_rollovers li img");    
    listNode.each(function() { 
     var oldURL = $(this).attr("src"); 
     var newURL = $(this).attr("id"); 
     var rolloverImage = new Image(); 
     rolloverImage.src = newURL; 
     $(this).hover(
      function() { 
       $(this).attr("src", newURL); 
      }, 
      function() { 
       $(this).attr("src", oldURL); 
      } 
     ); 
    }); 
}); 

Answer 3

Я второй SalientGreen. Он был быстрее меня. :) Я не буду обновлять свой код, но я получил это работает, как это ....

HTML (обратите внимание на два атрибута данных я добавил)

<h1>Image Rollovers</h1> 
    <ul id="image_rollovers"> 
     <li><img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" data-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png" data-old="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" /></li> 
    </ul>    

Javascript:

$(document).ready(function(){ 
    $('img').hover(
    function() { 
     $(this).attr("src", $(this).data("src")); 
    }, function() { 
     $(this).attr("src", $(this).data("old")); 
    } 
); 
}); 

Возможно, это поможет вам в будущем. :)

Answer 4

Вот как я бы это сделать:

$(document).ready(function() { 
 
    // Preload images 
 
    $('img[data-rollover-src]').each(function(img){ 
 
     var newURL = $(this).data('rollover-src'); 
 

 
     var rolloverImage = new Image(); 
 
     rolloverImage.src = newURL;  
 
    }); 
 
    
 
    $(document).on('mouseenter mouseleave','img[data-rollover-src]',function() { 
 
     var oldUrl = $(this).attr('src'); 
 
     var newUrl = $(this).data('rollover-src'); 
 
     $(this).attr('src',newUrl).data('rollover-src',oldUrl); 
 
    }); 
 
});

/* the default styles for the document */ 
 
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    width: 190px; 
 
    border: 3px solid blue; 
 
} 
 
h1, ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    padding-bottom: .5em; 
 
} 
 
img { 
 
    height: 175px; 
 
} 
 
/* the styles for the center content */ 
 
section { 
 
} 
 
li { 
 
    padding-right: 10px; 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    \t <h1>Image Rollovers</h1> 
 

 
    <ul> 
 
     <li> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" 
 
       data-rollover-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png"> 
 
     </li> 
 
    </ul> 
 
</section>