javascript - 将图像源复制到另一个图像标记多个具有单一功能的实例？

Question

有没有一种方法可以将单个函数应用于一组图像，从而将图像的来源从一个 img 标签复制到另一个？

在提供的图片示例中，我希望每张图片都显示一个重复的图片标签，如下所示:

您可以查看下面的代码片段以引用/编辑我目前正在处理的代码。

$('.pic > img').show(function() {
  var srcToCopy = $(this).attr('src');
  $('#imgsrc').attr('src', srcToCopy);
  console.log($('#imgsrc').attr('src'));
});

.pic,
#imgsrc {
  display: inline-block;
}

.container {
  display: block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Copy image 1 src: First instance -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
  <img id="imgsrc" />
</div>

<!-- Copy image 2 src: Second instance -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
  <img id="imgsrc" />
</div>

如有任何帮助或建议，我们将不胜感激。

Answer 1

您的主要问题是 ID 不能在页面中重复，它们根据定义是唯一的

改用类并遍历容器并返回到要更改的容器内的图像实例。

在容器实例中还有多种其他方式来组织同样的操作

$('.pic > img').each(function() {
  var srcToCopy = $(this).attr('src');
  $(this).closest('.container').find('.imgsrc').attr('src', srcToCopy);
 
});

.pic,
#imgsrc {
  display: inline-block;
}
img{width:60px}

.container {
  display: block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Copy image 1 src: First instance -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
  <img class="imgsrc" />
</div>

<!-- Copy image 2 src: Second instance -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
  <img class="imgsrc" />
</div>