Question

我有一张较大的图像，下方有两个较小的缩略图 - 标记如下：

<img src="../images/image.jpg" class="left" alt="main image" />
<img src="../images/image2-thumb.jpg" class="left" alt="image two" />
<img src="../images/image3-thumb.jpg" class="left thumb" alt="image three" />

我想在点击image2-thumb或image3-thumb时将image.jpg更改为点击的图像src但没有-thumb。

所以，如果我点击image2-thumb.jpg，那么image.jpg就会变成image2.jpg等等。

有人能指出我正确的方向让它发挥作用吗？

Answer 1

使用：

<img src="../images/image.jpg" class="left" alt="main image" />
<img src="../images/image2-thumb.jpg" class="right" alt="image two" />
<img src="../images/image3-thumb.jpg" class="right thumb" alt="image three" />

$('.right').click(function(){
    $('.left').attr('src',$(this).attr('src').replace('-thumb',''));
    alert($('.left').attr('src'));
});

<强> Working Demo

Answer 2

以下是您可以执行的操作：http://jsfiddle.net/aamir/8AeHv/

HTML：

<img src="../images/image.jpg" class="left main" alt="main image" />
<img src="../images/image2-thumb.jpg" class="left thumb" alt="image two" />
<img src="../images/image3-thumb.jpg" class="left thumb" alt="image three" />

时：

$(function () {
    $('.thumb').click(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    });
});

jQuery通过单击修改来更改图像src

2 个答案: