如何通過點擊圖片將圖片從一個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); 
});