用 jquery 交换图片 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15698241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Swap image src with jquery
提问by itsMe
I have one big image and small thumbs, i am trying to swap their src with each other. Here i am changing thumb img in bottleWrapper img, but i want to swap their src. Pls help!
我有一个大图像和一个小拇指，我试图互相交换他们的 src。在这里，我正在改变 BottleWrapper img 中的拇指 img，但我想交换它们的 src。请帮忙！
HTML
HTML
<div class="bottlesWrapper">
<img src="bottle1.png" />
</div>
<div class="thumbs">
<img src="bottle2.png" />
</div>
SCRIPT
脚本
<script>
$('.thumbs a').each(function() {
$(this).click(function() {
var aimg = $(this).find("img")
$('.bottlesWrapper img').fadeOut('fast',function(){
$(this).attr('src', $(aimg).attr('src')).fadeIn('fast');
});
});
});
</script>
EDIT
编辑
Thanks all :)
谢谢大家:)
I actually forgot to give out one information that I have various thumbs, this answer suits best! Thank you all for your precious inputs!
我实际上忘记给出一个我有各种拇指的信息，这个答案最适合！感谢大家的宝贵意见！
$('.thumbs img').click(function() {
var thmb = this;
var src = this.src;
$('.bottlesWrapper img').fadeOut(400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
采纳答案by Roko C. Buljan
To SWAPimages do like:
要交换图像，请执行以下操作：
$('.thumbs img').click(function() {
var thmb = this;
var src = this.src;
$('.bottlesWrapper img').fadeOut(400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
If you have multiple 'galleries' do like: http://jsbin.com/asixuj/5/edit
如果您有多个“画廊”，请执行以下操作：http: //jsbin.com/asixuj/5/edit
回答by bipen
ther is no <a>tag in your question ..so assuming its img.. on click of thumbs img.. the bottlesWrapperwill get swaped..
<a>你的问题中没有标签img..所以假设它..点击拇指img..bottlesWrapper将被交换..
try this
尝试这个
updated
更新
$('.thumbs img').click(function() {
var img=$(this).attr('src');
$('.bottlesWrapper img').fadeOut('fast',function(){
$(this).attr('src', img).fadeIn('fast');
});
$(this).fadeOut('fast',function(){
var bottlersImg=$('.bottlesWrapper img').attr('src');
$(this).attr('src', bottlersImg).fadeIn('fast');
});
});
NOTE: and you don't need eachloop ... jquery dose that by using a class selector works..
注意：并且您不需要each循环... jquery 剂量通过使用类选择器工作..
回答by Jai
As you don't have a <a>tag in the .thumbyour code won't work at all, instead try clicking the .thumbitself:
由于您的<a>代码中没有标签，因此根本无法使用.thumb，请尝试单击它.thumb本身：
$('.thumbs').click(function() {
var thumbsimgSrc = $(this).find("img").attr('src');
var bottleImgSrc = $('.bottlesWrapper img').attr('src');
$(this).find("img").attr('src', bottleImgSrc);
$('.bottlesWrapper img').fadeOut('fast').promise().done(function(){
$(this).attr('src', thumbsimgSrc).fadeIn('fast');
});
});
});
And .thumbis itself is a collection so you don't need to iterate through .each()method.
而且.thumbis 本身就是一个集合，所以你不需要遍历.each()方法。
回答by Anujith
Try:
尝试：
$('.thumbs img').click(function() {
var img_src = img.attr('src');
$(this).fadeOut('fast',function(){
$(this).attr('src', $('.bottlesWrapper img').attr('src')).fadeIn('fast');
});
$('.bottlesWrapper img').fadeOut('fast',function(){
$(this).attr('src', img_src ).fadeIn('fast');
});
});
You should attach click events to imgtags inside thumbsclass and then change the image source.
您应该将点击事件附加到类img内的标签thumbs，然后更改图像源。
