JQuery – 如何在点击链接时更改图像src

我正在使用JQuery库来显示具有不透明滑动描述的图像。 我需要添加一个链接列表，以便用户可以覆盖单击链接时显示的图像。 如何在点击链接时覆盖图库图像？

$(document).ready(function() { //Execute the slideShow slideShow(); }) function slideShow() { $('#gallery a').css({opacity: 0.0}); $('#gallery a:first').css({opacity: 1.0}); $('#gallery .caption').css({opacity: 0.7}); $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); setInterval('gallery()',6000); } function gallery() { var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); var caption = next.find('img').attr('rel'); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); $('#gallery .content').html(caption); } 
  <img src="https://stackoverflow.com/questions/1322752/jquery-how-can-i-change-an-image-src-on-click-of-a-link/images/storm2.jpg" alt="text in here" title="" width="480" height="260" rel="
Description
description goes in here "  <img src="https://stackoverflow.com/questions/1322752/jquery-how-can-i-change-an-image-src-on-click-of-a-link/images/storm1.jpg" alt="text in here" title="" width="480" height="260" rel="
Description 2
" /> ...... ...... ...... 
 
 
 
 
 
  

Answer 1

 $("a.mylink").click(function(event){ $("img.myimage").attr("src","image2.jpg"); }); 

从链接加载源代码也非常简单：

 $("a.mylink").click(function(event){ event.preventDefault(); var newSRC = $(this).attr("href"); $("img.myimage").attr("src", newSRC); }); 

Answer 2

 jQuery('#link').click(function() { jQuery('#image').attr('src',jQuery(this).attr('alt')); } 

这个方法有点像哈克，你有点作弊并将src-path存储到链接的alt选项卡中。

如果你想通过这本书来做，我建议你从视觉中分离逻辑。 例如，您创建一个如下数组：

 myArray['link1'] = 'url1'; myArray['link2'] = 'url2'; 

Array Key与链接的id标签相同：

 bar etc... 

如果你这样做，JavaScript会改变如下：

 jQuery('#link').click(function() { jQuery('#image').attr('src',myArray[this.id]); }