Javascript Jquery:替换从锚标记获取链接的图像源

我需要一个帮助，我被困在如何通过从其锚标签获取url链接来替换图像源。 我需要对n个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>

---

谢谢，我不擅长jquery:（

您可以使用以下代码实现基本的滚动效果：

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

演示： 或者，如果你想要更时尚的东西：

$('.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();
     }
 });

---

查找parents'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();
     });

});

这可能对你有帮助

HTML:

---

+问题$（“.slide a”）.点击（函数（e）{e.preventDefault（）；}）@MiljanPuzović你是对的，错过了那一部分。谢谢！谢谢：）正是我需要的。谢谢，但我还需要一些改进。。img标记中将有一个值。。像data image resolution=“500w”一样，我需要获取它的值，并将其合并到具有url+？+的旧源代码中哦。你明白了吗？它不会添加锚标记链接，但会添加img源代码，当光标离开时，img源代码将被替换。还有一个请求，你能解释一下你的代码吗？我不知道你是如何抓取我放置的锚定链接的。为什么你有一个不能或不应该被激活的链接？也许他想在悬停/点击时打开某种菜单。否则我就不明白了。我需要更改div上的一个图像，并且我被限制将任何自定义属性传递给图像标记。。但我可以添加锚定标签。。所以我选择了这个方法。。如果我需要全屏打开图像，那么我可以稍后删除preventDefault（）

<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>

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