JQuery - 如何通过点击链接更改图像src

Question

我正在使用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); 

    } 

    <div id="gallery"> 
          <a href="#" class="show"> 
           <img src="images/storm2.jpg" alt="text in here" title="" width="480" height="260" 
            rel="<h3>Description</h3>description goes in here "</a> <a href="#"> 
      <img src="images/storm1.jpg" alt="text in here" title="" width="480" height="260" 
       rel="<h3>Description 2</h3>" /> 
     </a>...... ...... ...... 
          <div class="caption"> 
           <div class="content"> 
           </div> 
          </div> 
         </div> 
         <div class="clear"> 
         </div> 

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路径进入链接的alt选项卡。

如果你想按照这本书做，我建议你从视觉效果分开逻辑。例如，您可以创建一个数组类似如下：

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

数组键是一样的链接的ID标签：

<a id="link1" href="foo">bar</a> etc... 

如果你做这种方式，JavaScript的变化如下：

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