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

我正在努力做到以下几点：

• 如果用户单击一个

  img

  ，则该图像应显示在另一个占位符div中，并通过添加类“已占用”（最好是单击）给它一个边框

• 我用背景色属性（第1-9行）实现了这一点，但是，如果我对图片也这么做，我无法想出解决方案，我尝试使用

  img

  标记，然后我尝试将

  img

  放在

  div

  中作为背景，甚至尝试在单击占位符时插入它

• 我希望代码检查占位符div是否为空或“已占用”，如果为空，请将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");} 

---

非常感谢您

您可以尝试以下内容

$（文档）.ready（函数（）{
var油漆，
$img；
$（“.color”）。单击（函数（）{
paint=$（this.css（'background-color'）；
$img=未定义；
})
$（'.gallery'）。在（'click'，'div'，function（）上{
$img=$（this.clone（）；
油漆=未定义；
});
$（'.wrap.insert'）。单击（函数（）{
$（this.css（“边框颜色”，绘画）；
});
$（'.wrap'）。在（'单击'，'上。插入：未（.occumber'），函数（）{
如果（$img）{
$（this.append（$img.addClass（'occulated'）；
$img=未定义；
}
});
});
$（文档）.ready（函数（）{
函数randomColor（）{
返回“#”+（“000000”+Math.floor（Math.random（）*16777216.toString（16））.slice（-6）；
};
$（“h1”）。单击（函数（）{
$（'body'）.css（'background'，randomColor（））；
});
})

.wrap{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit对齐内容：拉伸；
-ms柔性线包装：弹性；
对齐内容：拉伸；
-webkit对齐项：flex开始；
-ms-flex-align：开始；
调整项目：灵活启动；
;
高度：100px；
宽度：100p5；
边框：1px纯灰；
}
.插入{
高度：100px；
宽度：100px；
边框：1px纯灰；
}
#一个{
背景颜色：蓝色；
浮动：左；
}
#两个{
背景色：红色；
浮动：左；
}
#三{
背景：绿色；
浮动：左；
}
.画廊>分区{
显示：内联块；
}
gal1先生{
高度：100px；
宽度：100px；
背景：url（“https://i.kinja-img.com/gawker-media/image/upload/s--_KjrmVSk--/c_fill，佛罗里达州进步党，g_north，h_358，q_80，w_636/19c12pvu8o9sljpg.jpg”）；
}
gal2先生{
高度：100px；
宽度：100px；
背景：url(http://www.purple-planet.com/communities/5/004/012/574/565//images/4608142514_255x230.jpg);
}
gal3先生{
高度：100px；
宽度：100px；
背景：url（“http://image.shutterstock.com/display_pic_with_logo/892819/164734181/stock-vector-glossy-planets-colorful-vector-set-on-dark-sky-background-164734181.jpg");
}
.有事{
边框：3件粉红色实心；
}

点击
蓝色
红色
绿色

如果我多次单击同一图像会怎么样？@Arun。谢谢，这是一个明智的解决方案。如果用户在一个图像上点击两次，我认为出于这个目的，它不应该生成下一个图像，但我不知道作为替代方法应该做什么，所以这很好。不过，将函数重置为空占位符会很有用。不要太迂腐，但如何在单击时将图像存储在var中，然后在单击时将其显示在占位符中？顺便说一句，抱歉糟糕的布局，这只是一个项目的练习页：-）抱歉。。。您将图像存储在存储库中是什么意思variable@Arun，就像背景色存储在第2-5行中，然后应用于占位符，如第6-9行。