Question

我试图在点击缩略图时将图像src添加到div中的图像中。问题是当单击另一个thumnail时，图像src不会改变。

HTML代码是：

  <a class="thumbnail" href="#" >
     <img  src="img1">
     <img  src="img2">
     <img  src="img3">
  </a>



 <div  class="imageforthumb">
    <img class="imageforthumbs">
 </div>

使用的Javascript是：

$('.thumbnail').click(function () {
var images = $('.thumbnail img').attr('src');
$(".imageforthumbs").attr('src', images)
});

一旦我点击第一张图片img1，它就被设置为img1，当我点击缩略图时不会更改为img2。请告诉我这里可能有什么问题？

Answer 1

这一行：

var images = $('.thumbnail img').attr('src');

你总是得到第一张图片的src。

将您的代码更改为：

$('.thumbnail img').click(function () {
    var images = $(this).attr('src');
    $(".imageforthumbs").attr('src', images)
});

实例：http://jsfiddle.net/8hTrr/

编辑：正如所指出的，你不需要jQuery来获取attr，你只需要：

$('.thumbnail img').click(function () {
     $(".imageforthumbs").attr('src', this.src)
});

更新示例：http://jsfiddle.net/8hTrr/1/

Answer 2

您的js代码不正确。尝试

$('.thumbnail').click(function (eve) {
    $(".imageforthumbs").attr('src', $(eve.target).attr('src'));
});

Answer 3

将事件委派给<a></a>标记内的每个图像。然后绑定点击的<img />。

的src

$('.thumbnail').on('click', 'img', function () {
    $(".imageforthumbs")[0].src = this.src;
});

使用javascript动态添加图像src

3 个答案: