有没有一种方法可以将单个函数应用于一组图像,从而将图像的来源从一个 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>
如有任何帮助或建议,我们将不胜感激。
最佳答案
您的主要问题是 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>
关于javascript - 将图像源复制到另一个图像标记多个具有单一功能的实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48143094/