隱藏div后，允許在單擊按鈕時重新顯示

Question

初始顯示將僅顯示第一個div。 當選擇添加另一個時，下一個div也將顯示。 當您選擇該div旁邊的“刪除”時，它將被隱藏/刪除。

我遇到的問題是，如果用戶選擇“添加另一個”，如何使div重新顯示。 這樣它們最多可以顯示4個div。 當前，如果您選擇“添加另一個”，則在選擇“刪除”后，如果以前未顯示並刪除它，它只會顯示一個div。 我希望用戶始終可以選擇添加所有4個div，即使他們要添加一個然后刪除它，然后又將其添加回去。

這是我當前的代碼：

 //Remove div when clicked $('#donation_element1_row').show(); $('.removeDiv').click( function() { $(this).closest('div[id*="donation_element"]').hide(); }); //Add another designation var count = 0, $allDivs = $('#donation_element2_row, #donation_element3_row, #donation_element4_row'); $('#addAnother').click( function() { if( count < $allDivs.length ) { $allDivs.eq( count ).fadeIn( 'slow' ); count++; } }); 

 #addAnother { display: inline-block; width: 236px; height: 50px; line-height: 44px; text-align: center; border: 3px solid #f8a61b; color: #860005; font-size: 16px; font-weight: bold; margin-bottom: 0px; margin-top: 20px; cursor: pointer; background-color: #f8a61b; } div[id*='donation_element'] { background-color: blue; color: #fff; display: none; margin: 10px; max-width: 200px; } .removeDiv { cursor: pointer; text-align: right; background-color: #333; text-align: center; } p { text-align: center; padding-top: 10px; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="donation_element1_row"> <p>Div 1</p> <div class="removeDiv">Remove X</div> </div> <div id="donation_element2_row"> <p>Div 2</p> <div class="removeDiv">Remove X</div> </div> <div id="donation_element3_row"> <p>Div 3</p> <div class="removeDiv">Remove X</div> </div> <div id="donation_element4_row"> <p>Div 4</p> <div class="removeDiv">Remove X</div> </div> <div id="addAnother">+ Add Another</div> 

Answer 1

您也可以使用以下代碼。 因此，當您刪除div時，請將其附加到末尾。 這將幫助您超過4個div。

 //Remove div when clicked $('#donation_element1_row').show(); $('.removeDiv').click( function() { $(this).parent().hide(); $("#parent_donation_container").append($(this).parent()); }); $('#addAnother').click( function() { $(".donation_element").not(":visible").first().fadeIn( 'slow' ); }); 

 #addAnother { display: inline-block; width: 236px; height: 50px; line-height: 44px; text-align: center; border: 3px solid #f8a61b; color: #860005; font-size: 16px; font-weight: bold; margin-bottom: 0px; margin-top: 20px; cursor: pointer; background-color: #f8a61b; } div[id*='donation_element'] { background-color: blue; color: #fff; display: none; margin: 10px; max-width: 200px; } .removeDiv { cursor: pointer; text-align: right; background-color: #333; text-align: center; } p { text-align: center; padding-top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="parent_donation_container"> <div id="donation_element1_row" class="donation_element"><p> Div 1</p><div class="removeDiv">Remove X</div></div> <div id="donation_element2_row" class="donation_element"><p> Div 2</p><div class="removeDiv">Remove X</div></div> <div id="donation_element3_row" class="donation_element"><p> Div 3</p><div class="removeDiv">Remove X</div></div> <div id="donation_element4_row" class="donation_element"><p> Div 4</p><div class="removeDiv">Remove X</div></div> </div> <div id="addAnother">+ Add Another</div> 

https://jsfiddle.net/fye8qjk1/11/

Answer 2

你快到了。 刪除項目時，還需要遞減計數，並將第一個div添加到div列表中。 例如：

$('.removeDiv').click( function() {
  $(this).closest('div[id*="donation_element"]').hide();
  count --;
});

$allDivs = $('#donation_element1_row, #donation_element2_row, #donation_element3_row, #donation_element4_row');

在這里提琴： https : //jsfiddle.net/ofw4g2ym/2/

Answer 3

您不需要任何櫃台，
使您的代碼可以靈活地處理任意數量的捐贈元素

 var $donation = $(".donation"); var $donationAdd = $(".donation-add"); var $donationRemove = $(".donation-remove"); var donationTot = $donation.length; function donationHandler () { if ($donation.filter(":visible").length >= donationTot) { $donationAdd.prop("disabled", true); } } $donationAdd.on("click", function() { $donation.filter(":hidden").eq(0).show(); donationHandler(); }); $donationRemove.on("click", function() { $(this).closest(".donation").hide(); donationHandler(); }); 

 *{margin:0; box-sizing:border-box;} .donation { padding: 10px; background: #eee; margin-bottom: 10px; } .donation ~ .donation{ display: none; } 

 <div class="donation"> <p>Div 1</p> <button type="button" class="donation-remove">&times; Remove</button> </div> <div class="donation"> <p>Div 2</p> <button type="button" class="donation-remove">&times; Remove</button> </div> <div class="donation"> <p>Div 3</p> <button type="button" class="donation-remove">&times; Remove</button> </div> <div class="donation"> <p>Div 4</p> <button type="button" class="donation-remove">&times; Remove</button> </div> <button type="button" class="donation-add">+ Add</button> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>