Question

我有大约五个div，并且每个都有一张从数据库中检索到的图片，我想在点击图片时移动到主div，主div上的图片取代了那个被点击了它的div

＆＃13;

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>

＆＃13;

想要点击div中的任何图片时，它应该移动到此，并且此div上的图片将替换被点击的div中的图片。谢谢

Answer 1

以下是工作示例：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);
});

Answer 2

＆＃13;

$("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);
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

您不需要div中的所有ID，只需将类添加到您想要更改的图像中，然后让viewMainPicDiv更改我使用$("img.classYouChoose").each(f...发布的javascript代码，或者按照下一个代码段< / p>

＆＃13;

$("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);
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何通过点击图片

2 个答案: