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"));
});
});