JQuery-单击链接后如何更改图像src

Question

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

<script>
    $(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);
    }
</script>

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