我试图点击一个特定的方 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>
最佳答案
使用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>
关于javascript - 使用切换使图像显示在另一个 div onclick 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42012489/