jQuery update image src on hover

Question

Я не хочу, чтобы изображения загружались до тех пор, пока ссылка не зависнет, так что для этого вот сценарий, но он не работает, может кто-нибудь помочь мне в его исправлении? Я добавил слушателя событий к каждой ссылке, а на мыши - функцию, которая устанавливает изображение. Чтобы сделать более интересным, мы можем скопировать LazyLoad немного здесь, а также использовать свойство данных оригинал :)

Например: это HTML Код:

<li> 
    <a href="#" class="tip_trigger"> 
     <img class="tip" alt="300 Grams" 
       data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg" 
       src='empty.gif' width="90" height="90"/> 
     Alex 
    </a> 
</li> 

Затем добавить слушатель события :

Код:

// call for each element with the class 'tip' that's being hovered upon 
$('.tip').hover(function() 
{ 
    // retrieve the image inside this element 
    var elem = $(this).find('img'); 

    // set the 'src' to the 'data-original' value 
    elem.attr('src', elem.attr('data-original')); 
}); 

для живой демонстрации, вы можете увидеть эту страницу http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html выше часть сценария добавляется только к первой букве ALEX в категории «A».

Answer 1

.tip уже образ, так что вы не можете найти изображение с $(this).find('img');

попробовать вместо

$('.tip_trigger').hover(function() 
{ 
    // retrieve the image inside this element 
    var elem = $(this).find('img'); 

    // set the 'src' to the 'data-original' value 
    elem.attr('src', elem.data('original')); 
}); 

использование также .data() метод вместо .attr()

Answer 2

Вы привязали наведение к элементу img, поэтому вы не можете найти ребенка img. Просто используйте это или измените наведение на .tip_trigger.

$('.tip_trigger').hover(function() // That should do the trick 
{ 
    // retrieve the image inside this element 
    var elem = $(this).find('img'); 

    // set the 'src' to the 'data-original' value 
    elem.attr('src', elem.attr('data-original')); 
}); 

Answer 3

var elem = $(this).find('img'); < - вы ищет изображение, когда это изображение.

Либо замените элемент Вы придаете парения в

$('.tip_trigger').hover(function() 
{ 
    // retrieve the image inside this element 
    var elem = $(this).find('img'); 

    // set the 'src' to the 'data-original' value 
    elem.attr('src', elem.attr('data-original')); 
}); 

или держать его так, как она есть, и не искать изображения

$('.tip').hover(function() 
{ 
    var elem = $(this); 

    // set the 'src' to the 'data-original' value 
    elem.attr('src', elem.attr('data-original')); 
}); 

Answer 4

jQuery.find() ищет детей. Вы уже нашли img с вашим «.tip» -селектором.

var elem = $(this);