如何将通过 this.id 获得的 ID 将元素附加到另一个元素?

Question

我在同一类中有几张图片，当单击该类时，我使用 this.id 获取图片的ID。我想获取该 ID 并使用它来移动已单击的图片。我正在尝试使用ID"您的"将其附加到跨度中。

$(".characters img").on("click",function(){
console.log(this.id);
$(this.id).prependTo("#yours");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "characters">
<img src="assets/images/luke.jpg" id="luke">
<img src="assets/images/rey.jpg" id="rey">
<img src="assets/images/kylo.jpg" id="kylo">
<img src="assets/images/snoke.jpg"id="snoke">
</div>
<div class = "text">
<h1> Your Character </h1>
<span id="yours"> </span>
<h1>Enemies Available to Attack</h1>
<span id="enemies"></span>
<h1> Defender</h1>
<span id="defender"></span>
</div>

Answer 1

使用图像(this(实例化一个新的jQuery对象，而不是this.id：

改变：

$(this.id).prependTo("#yours");

自：

$(this).prependTo("#yours");

Answer 2

在单击img时，目标#yours元素，将其清空(如果需要(，然后clone单击的img并将其传递给html方法，因为它接受jQuery对象。

$(".characters img").on("click",function(){
// Empty "yours" and add the cloned clicked image
$("#yours").empty().html($(this).clone());
});