Jquery-将图像从一个元素移动到另一个元素

Jquery - Move image from element to element

本文关键字：元素 一个 移动 另一个 图像 Jquery-      更新时间：2023-09-26

当OnClick在图像上时，我正在尝试移动图像，以下是示例：http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq我想让它像链接解释的那样，由于某种原因，它在这里不起作用，也许这里有人可以帮助我，我已经在谷歌上搜索了几个小时了。

以下是我想做的事情：http://orakels.org/php/?m=wo_lonline

这是我想要的结果；’）

这是我的JsFiddle：http://jsfiddle.net/3cv92hxy/3/

目前我的代码如下：

<body>
<div id="cardcontainer">
<div class="cards">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
</div>
</div>
<div id="result">
Picture 1 | Picture 2 | Picture 3
</div>

<script type="text/javascript">
/*http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq
 Here add:
    'image_path': ['id_elm1', 'id_elm2']
 "id_elm1" is the ID of the tag where the image is initially displayed
 "id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
  'img/kaart.png': ['cards', 'result'],
 /* 'imgs/girl.jpg': ['cards', 'result'],
  'imgs/dog.jpg': ['dog1', 'dogto'] */
};
// function executed when click to move the image into the other tag
function whenAddImg() {
  /* Here you can add a code to be executed when the images is added in the other tag */
  return true;
}
         /* From here no need to edit */
// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
 // http://coursesweb.net/javascript/
  // put the image in element with ID from "ide"
  obaImg.putImg = function(img, ide) {
    if(document.getElementById(ide)) {
      document.getElementById(ide).innerHTML = '<img src="'+ img+ '" />';
    }
  }
  // empty the element with ID from "elmid", add image in the other element associated to "img"
  obaImg.alternateImg = function(elmid) {
    var img = obaImg.storeim[elmid];
    var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
    document.getElementById(elmid).innerHTML = '';
    obaImg.putImg(img, addimg);
    // function executed after the image is moved into "addimg"
    whenAddImg();
  }
  obaImg.storeim = {};            // store /associate id_elm: image
  // add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
  // add the image in the first tag associated to image
  // register 'onclick' to each element associated with images in "obimids"
  obaImg.regOnclick = function() {
    for(var im in obimids) {
      obaImg.storeim[obimids[im][0]] = im;
      obaImg.storeim[obimids[im][1]] = im;
      obaImg.putImg(im, obimids[im][0]);
      document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
      document.getElementById(obimids[im][1]).onclick = function(){ obaImg.alternateImg(this.id); };
    }
  }
obaImg.regOnclick();       // to execute regOnclick()
</script>
</body>

css：

body{
background-color:black;
}
#cardcontainer {
margin:10px;
padding:10px;
}
.cards {
width:960px;
margin:  auto;
padding:15px;
margin-top:14px;
}

.cards img {
margin-left:-40px;
}
.cards img:hover, .cards img:focus, .cards img:active {
-webkit-transform: translate(0px -50px);
transform: translate(0px,-50px);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#result {
width:960px;
padding:20px;
margin:0 auto;
background-color:yellow;
}

当我更改时

var obimids = {
  'img/kaart.png': ['cards', 'result'],

至

var obimids = {
  'img/kaart.png': ['cardcontainer', 'result'],

它有点管用，但这不是我想要的，问题一定是因为卡片是一个类，知道怎么解决吗？

相关文章：