使用javascript动态添加图像src答案

【问题标题】：dynamically adding image src using javascript使用javascript动态添加图像src
【发布时间】：2014-05-31 09:43:11
【问题描述】：

我正在尝试通过单击缩略图将图像 src 添加到 div 中的图像中。问题是单击另一个缩略图时图像 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。请指教这里有什么问题？

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您的 js 代码不正确。试试

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

【讨论】：

哈哈，另一个竞争条件 ;-)。如果此解决方案满足您的需求，请接受 Jamiec 在我之前提交的概念上相同的答案。
非常感谢。在 .thumbnail $('.thumbnail img').click(function () { $(".imageforthumbs").attr('src', $(this).attr( 'src')); });