通过切换使图像显示在另一个div onclick上

Question

我试图能够单击一个特定的正方形，并获得一个选中标记以显示在其上方。 我希望它具有切换效果，但是我想尝试至少使选中标记显示出来，而实际上使它出现甚至是一个问题。

我究竟做错了什么？

 $('.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类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> 

Answer 2

了解您在寻找什么。 基本上，当您单击选中标记正方形时，可以在选中标记正方形图像上方“切换”选中标记图像。 问题是一旦将选中标记放在正方形上，切换开关将不再起作用。 我想出了一个应该会更好一些的解决方案。

基本上，如果我们利用以下规则，当选择绑定到<input type="checkbox" />的label时，这将toggle复选框的checked属性。

然后，我们可以在jQuery中绑定到此事件并显示\\隐藏选中标记。 在这种情况下，我们不将任何点击事件绑定到图像，而是将复选框的change事件绑定。 类似于下面的示例。

现在的问题是：

我为什么要使用复选框

通过使用复选框，我们可以将结果捕获到表单中。 通过枚举具有被checked属性的所有复选框，还可以轻松识别被选中的内容。

要将其发送到您的服务器，您需要在每个复选框中添加一个name属性，并设置value属性。

 $('.calendar-check').on('change', function() { if ($(this).prop('checked')) $(this).parents('.calendar-wrap:first').find('.checkmark-img').show(); else $(this).parents('.calendar-wrap:first').find('.checkmark-img').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 { display: none; z-index: 1; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .calendar-check { display: none; } .package-check-toggle { position: relative; height: 100%; width: 100%; display: block; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calendar-wrap" class="calendar-wrap"> <h2 class="product-titles">Package 1</h2> <label for="package-check-1" class="package-check-toggle"> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" /> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" /> </label> <input type="checkbox" class="calendar-check" id="package-check-1" /> </div> <div id="calendar-wrap" class="calendar-wrap"> <h2 class="product-titles">Package 2</h2> <label for="package-check-2" class="package-check-toggle"> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" /> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" /> </label> <input type="checkbox" class="calendar-check" id="package-check-2" /> </div> 

样本JSFiddle

编辑为了完整起见，我想出了一个最好的CSS（3）解决方案。 这与使用jQuery完全无关。 再次考虑到一个复选框（基于值），并基于切换来切换该复选标记。

标记非常简单。

<div class="calendar-checkmark">
    <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
    <label for="checkbox-1"></label>
</div>

例：

 .calendar-checkmark input[type=checkbox] { display: none; } .calendar-checkmark label { cursor:pointer; display: block; height: 384px; width: 354px; position:relative; background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent; } .calendar-checkmark label::after { content:' '; display: block; height: 100%; width: 100%; position: absolute; z-index:1; display:none; background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent; } .calendar-checkmark input[type=checkbox]:checked + label::after { display: block; } 

 <div class="calendar-checkmark"> <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" /> <label for="checkbox-1"></label> </div> 

这里的技巧是使用相邻的同级选择器 ，这些选择器允许您基于另一个元素选择相邻的同级。 因此，如果我们在选中复选框时查看css，它将得到伪类 :checked应用于它（类似于:hover等）。 然后，使用相邻的+选择器定位label 。

现在，label元素的css背景设置为方形框的图像。 接下来，它应用了psudo-class ::after ，它创建了包含复选框的psudo-element。 这是在元件中，当该复选框被之后添加checked的psudo类:checked被addeed。 然后，通过显示该元素来更改psudo元素的状态。

另一个小提琴

Answer 3

如果我们仅删除框形图像并通过CSS创建它们，则可以简单得多。 下载的内容将更少，然后我们可以使盒子的背景透明。 这将使我们能够仅显示和隐藏已位于每个框后面的对勾标记。

 $('.package-img').click(function () { this.nextElementSibling.classList.toggle("hide"); }); 

 parent { position:relative; } .package-img { border:3px solid black; width: 110px; height:110px; background-color:rgba(0,0,0,0); margin-left: 20%; cursor: pointer; position:relative; display:inline-block; } .checkmark-img { transition:1s; width: 15%; z-index: -1; position:relative; margin-left:-15%; } img.hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2 class="product-titles">Package 1</h2> <div class="parent"> <div class="package-img"></div> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide"> </div> <h2 class="product-titles">Package 2</h2> <div class="parent"> <div class="package-img"></div> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide"> </div> 

Answer 4

1.绝对将对勾标记放在包装图片的顶部

2.隐藏它

3.使用切换显示它

因为它隐藏在它的顶部，所以您将需要使用同级选择器来检索它

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

 .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: 60%; height: auto; opacity: 1; margin-left: 25%; margin-top:10%; cursor: pointer; transition:1s; -webkit-transition:1s; position: absolute; 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="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">' <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="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">' <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img"> </div>