Jquery：替换来自锚标记的图像源获取链接

Question

我需要一个帮助，我被困在如何通过从其锚标记获取url链接替换图像源。 我需要为一些div重复这个。

我所拥有的是n个div，以及每个div中带有图像的锚标签。 当有人将鼠标悬停在图像标记上时，应通过从锚标记获取源来更改图像源，并且我还要禁用锚点击。 这可能吗？

看看代码：

<div class="slide" data-type="image">
        <a href="http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg">
            <img data-image="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg" 
            data-src="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg" 
        src="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg"
            />
        </a>

http://jsfiddle.net/7AqkS/1/

谢谢，我在jquery中不擅长:(

Answer 1

您可以使用以下代码实现基本翻转效果：

$(".slide a").hover(function() {
    $(this).find('img').prop('src', this.href);
}, function() {
    $(this).find('img').prop('src', function() {
        return $(this).data('src');
    });
})
.on('click', function(e) { e.preventDefault(); })

演示： http ： //jsfiddle.net/7AqkS/6/

或者，如果你想要更高档的东西：

$('.slide a').on({
     'mouseover mouseout': function(e) {
         $('img', this).prop('src', function() {
             return e.type == 'mouseover' ? e.delegateTarget.href : $(this).data('src');
         });
     },
     click: function(e) {
         e.preventDefault();
     }
 });

Answer 2

查找父项'href'属性并将images'src'属性设置为其值，如下所示。

$( document ).ready( function() {

     // One way che
     $( ".slide img" ).hover( function( element ){
         var image = $( this );
         var newImage = image.parent( 'a' ).attr( 'href' );
         image.attr( 'src', newImage );

     });

     // Prevent Default anchor behavior
     $( ".slide a" ).click( function(element){ 
          element.preventDefault();
          element.stopPropagation();
     });

});

Answer 3

这可能会帮助你http://jsfiddle.net/7AqkS/8/

HTML：

<div class="slide" data-type="image"> <a href="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412">
        <img data-image="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" 
                data-src="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412" 
            src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg"/>
    </a>

</div>
<div class="slide" data-type="image">
    <a href="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412">
                <img data-image="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" 
                data-src="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412" 
            src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg"/>
    </a>

</div>

JS：

$(document).ready(function(){
$(".slide img").on("mouseenter", function () {
    $(this).attr("src", $(this).data("src"));
}).on("mouseleave", function () {
    $(this).attr("src", $(this).data("image"));
});
});