Question

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

如果用户点击img，该图片应显示在另一个占位符div中，并通过添加“已占用”类为其添加边框，最好是点击。
我使用背景颜色属性（第1-9行），但是，如果我对图片执行相同的操作，我无法提出解决方案，我尝试使用{{1标签，然后我尝试将img放在img中作为背景，甚至尝试将其插入点击占位符。
我希望代码检查占位符div是空的还是“占用”，如果为空，将图片放在里面，如果没有，则将其放在下一个空的占位符div中。

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

这是我被卡住的笔：

div

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中显示它

1 个答案: