如何通过单击图片将图片从一个 div 交换到另一个答案

【问题标题】：how to swap pictures form one div to another by clicking on the picture如何通过单击图片将图片从一个 div 交换到另一个
【发布时间】：2016-01-22 17:53:07
【问题描述】：

我有大约五个 div，每个 div 都有一张从数据库中检索到的图片，我希望当点击图片时，它会移动到主 div，主 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 中的任何图片被点击时，它应该移动到 this 并且此 div 上的图片替换被点击的 div 中的图片。谢谢

【问题讨论】：

您忘记发布您尝试过的 JavaScript。
您应该发布一些 javascript 代码，stackoverflow 不是一个乞求网站，您可以在其中要求代码 sn-ps 来完成您的项目。如果您提供一些您编写的代码，我们很乐意为您提供帮助。如果您不确定在特定情况下使用哪种语言，我建议您回到起点。

标签： javascript jquery html

【解决方案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 并更改我使用$("img.classYouChoose").each(f... 发布的 javascript 代码或跟随下一个 sn-p

$("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>

【讨论】：

【解决方案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);
});

【讨论】：