javascript - 使用切换使图像显示在另一个 div onclick 上

Question

我试图点击一个特定的方 block 并在其上方显示一个复选标记。我希望它具有切换效果，但我想至少尝试显示复选标记，但我真的很难让它出现。

我做错了什么？

$('.package-img').click(function () {
        //target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
        $('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
    });

.package-img {
    width: 60%;
    height: auto;
    opacity: 1;
    margin-left: 20%;
    cursor: pointer;
    transition:1s; -webkit-transition:1s;
    position: relative;
}
#calendar-wrap, #tp-wrap {
    width: 100%;
    position: relative;
}
.checkmark-img {
    width: 50%;
    height: 50%;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 1</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 2</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

Answer 1

使用before 方法而不是prepend，否则您的图像将被添加到另一个图像中。也使用 $(this).before... 否则你的复选标记将被添加到类 package-img

的所有图像

$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')

var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);

$('.package-img').click(function () {
    $(this).prev().show();
});

$('.checkmark-img').click(function () {
    $(this).hide();
});

.package-img {
    width: 60%;
    height: auto;
    opacity: 1;
    margin-left: 20%;
    cursor: pointer;
    transition:1s; -webkit-transition:1s;
    position: relative;
}
#calendar-wrap, #tp-wrap {
    width: 100%;
    position: relative;
}
.checkmark-img {
    width: 50%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 1</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 2</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>