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格的收益。

//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>

隐藏div后，允许在单击按钮时重新显示

3 个答案: