单击时存储 img 并在单击时将其显示在其他 div 中

Question

我正在尝试执行以下操作：

如果用户单击 img，该图像应显示在另一个占位符 div 中，并通过添加 class [=41] 为其添加边框=]，最好是在点击时。
我得到这个来处理背景颜色属性（第 1-9 行），但是，如果我对图片做同样的事情，我无法想出解决方案，我试过使用 img 标签，然后我尝试将 img 放在 div 中作为背景，甚至尝试在点击占位符时将其插入。
我要代码检查占位符div是否为空或'occupied'，如果为空，则将pic放在里面，如果不是，则将其放在下一个空的占位符 div.

理想情况下，第 1-9 行中的解决方案就是我想要的。

这是我卡住的笔：

 $('.gallery>div').click(function(){
 if ($(".insert:eq(0)").hasClass("occupied"))
 {$(this).clone(this)    .appendTo(".insert:eq(1)").$(".wrap:eq(1)").addClass("occupie   d");}

http://codepen.io/damianocel/pen/gawmeY

非常感谢

Answer 1

你可以试试

$(document).ready(function() {
  var paint,
    $img;
  $(".color").click(function() {
    paint = $(this).css('background-color');
    $img = undefined;
  })
  $('.gallery').on('click', 'div', function() {
    $img = $(this).clone();
    paint = undefined;
  });

  $('.wrap .insert').click(function() {
    $(this).css("border-color", paint);
  });
  $('.wrap').on('click', '.insert:not(.occupied)', function() {
    if ($img) {
      $(this).append($img).addClass('occupied');
      $img = undefined;
    }
  });

});


$(document).ready(function() {
  function randomColor() {
    return '#' + ('000000' + Math.floor(Math.random() * 16777216).toString(16)).slice(-6);
  };

  $("h1").click(function() {
    $('body').css('background', randomColor());
  });
})

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  ;
  height: 100px;
  width: 100p5;
  border: 1px solid grey;
}
.insert {
  height: 100px;
  width: 100px;
  border: 1px solid grey;
}
#one {
  background-color: blue;
  float: left;
}
#two {
  background-color: red;
  float: left;
}
#three {
  background: green;
  float: left;
}
.gallery>div {
  display: inline-block;
}
.gal1 {
  height: 100px;
  width: 100px;
  background: url("https://i.kinja-img.com/gawker-media/image/upload/s--_KjrmVSk--/c_fill,fl_progressive,g_north,h_358,q_80,w_636/19c12pvu8o9sljpg.jpg");
}
.gal2 {
  height: 100px;
  width: 100px;
  background: url(http://www.purple-planet.com/communities/5/004/012/574/565//images/4608142514_255x230.jpg);
}
.gal3 {
  height: 100px;
  width: 100px;
  background: url("http://image.shutterstock.com/display_pic_with_logo/892819/164734181/stock-vector-glossy-planets-colorful-vector-set-on-dark-sky-background-164734181.jpg");
}
.occupied {
  border: 3px pink solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random_background">
  <h1>click</h1>

  <div class="color" id="one">blue</div>
  <div class="color" id="two">red</div>
  <div class="color" id="three">green</div>
  <div class="wrap">
    <div class="insert"></div>
    <div class="insert"></div>
    <div class="insert"></div>
  </div>
  <div class="gallery">
    <div class="gal1"></div>
    <div class="gal2"></div>
    <div class="gal3"></div>
  </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</div>

单击时存储 img 并在单击时将其显示在其他 div 中

Store img on click and display it in other div on click

jquery

image

jquery-selectors