通過切換使圖像顯示在另一個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>