如何通过点击图片将图片从一个div切换到另一个div

Question

我有大约五个div（s），并且他们每个人都有一张从数据库中检索的图片，我希望当图片被点击时移动到主要的股利和主DIV的图片替换被点击它的div的一个

html code 
 

 
<div id="viewPic1Div"><img src=""/></div> 
 
<div id="viewPic2Div"><img src=""/></div> 
 
<div id="ViewPic3Div"></div> 
 
<div id="viewPic4Div"></div> 
 
<div id="viewMainPicDiv"><img src=""/></div>

要点击任何div中的图片时，它应该是移动到此而这个div上的图片替换了被点击的div中的图片。感谢

Answer 1

$("img").each(function(){ 
 
    var imgageClicked = $(this); 
 
    imgageClicked.click(function(im){ 
 
    var srcMain = $("#viewMainPicDiv img").attr("src"); 
 
    var srcClick = (imgageClicked.attr("src")); 
 
    
 
    $("#viewMainPicDiv img").attr("src",srcClick); 
 
    imgageClicked.attr("src",srcMain); 
 
    }); 
 
});

img{float:left;with:100px;height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="viewPic1Div"><img src="http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810038.png"/></div> 
 
<div id="viewPic2Div"><img src="http://icons.iconarchive.com/icons/icontexto/elite-captains/256/Elite-Captain-Black-Shielded-icon.png"/></div> 
 
<div id="ViewPic3Div"><img src="http://graphichive.net/uploaded/fordesigner/1313308502.jpg"/></div> 
 
<div id="viewPic4Div"><img src="http://www.icosky.com/icon/png/Avatar/Elite%20Soldiers%20Weapons/Gas%20Soldier%20with%20Weapon.png"/></div> 
 
<div id="viewMainPicDiv"><img src=""/></div>

你并不需要在所有的div的ID，只是把一个类你想要改变的图像和让viewMainPicDiv改变我发布的javascript代码$("img.classYouChoose").each(f...或者按照下面的代码片段

$("img.toswap").each(function(){ 
 
    var imgageClicked = $(this); 
 
    imgageClicked.click(function(im){ 
 
    var srcMain = $("#viewMainPicDiv img").attr("src"); 
 
    var srcClick = (imgageClicked.attr("src")); 
 
    
 
    $("#viewMainPicDiv img").attr("src",srcClick); 
 
    imgageClicked.attr("src",srcMain); 
 
    }); 
 
});

img{float:left;with:100px;height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><img class="toswap" src="http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810038.png"/></div> 
 
<div><img class="toswap" src="http://icons.iconarchive.com/icons/icontexto/elite-captains/256/Elite-Captain-Black-Shielded-icon.png"/></div> 
 
<div><img class="toswap" src="http://graphichive.net/uploaded/fordesigner/1313308502.jpg"/></div> 
 
<div><img class="toswap" src="http://www.icosky.com/icon/png/Avatar/Elite%20Soldiers%20Weapons/Gas%20Soldier%20with%20Weapon.png"/></div> 
 
<div id="viewMainPicDiv"><img src=""/></div>

Answer 2

这里是工作示例：http://codepen.io/maxali/pen/PZQzmr

$('div[id^="viewPic"] img').click(function(){ 

    var picTemp = $(this).attr('src'); 
    var picMain = $('#viewMainPicDiv img').attr('src'); 

    $(this).attr('src', picMain); 
    $('#viewMainPicDiv img').attr('src', picTemp); 
});