Question

克隆插槽后，隐藏label。只有顶部的第一个插槽才有label（未隐藏）。

目前它隐藏了所有标签，如何解决这个问题？

$('.slot-container').on("click", ".btn-add-slot", function(event) {
    var slot = $(this).closest('.slot');
    copySlot = slot;

    $('label', copySlot).hide(); // hide Clone Label

    $(slot).clone().appendTo(".slot-container");

    //hide button from this slot
    $(this).hide();
});

HTML：

<div class="slot-container">
    <div class="slot">
        <label>Time</label>
        <input type='text' class='address_field' />
        <button class="btn-add-slot">
          Add Slot +
        </button>
    </div>
</div>

Fiddle

Answer 1

要解决此问题，您只需要在克隆元素中的hide()元素上调用label。另请注意，您可以稍微整理一下逻辑。试试这个：

$('.slot-container').on("click", ".btn-add-slot", function(event) {
    var $clone = $(this).closest('.slot').clone().appendTo(".slot-container");        
    $clone.find('label').hide();
    $(this).hide();
});

Updated fiddle

Answer 2

用CSS隐藏它怎么样？

＆＃13;

.slot:not(:first-child) label { visibility: hidden }

＆＃13;

<div class="slot-container">

  <div class="slot">
    <label>Time</label>
    <input type='text' class='address_field' />
    <button class="btn-add-slot">
      Add Slot +
    </button>
  </div>
  
  <div class="slot">
    <label>Time</label>
    <input type='text' class='address_field' />
    <button class="btn-add-slot">
      Add Slot +
    </button>
  </div>

</div>

＆＃13;

或者，如果您不满意，原始代码的问题在于，当您分配到slotCopy时，您实际上并未复制插槽，只需将其分配给同一个插槽。

var copySlot = $(slot).clone(); // clone here 
$('label', copySlot).hide(); // hide Clone Label
copySlot.appendTo(".slot-container"); // append now

Here's the updated jsfiddle

Answer 3

$(document).ready(function() {
  $('.slot-container').on("click", ".btn-add-slot", function(event) {
    var _clone = $(this).closest('.slot').clone(); // clone slot
    $(_clone).find('label').hide(); // hide lablel from cloned element
    _clone.appendTo(".slot-container"); // append cloned slot
    $(this).hide(); //hide button from this slot
  });
});

body { padding: 5px; }
label { font-weight: bold; }
input[type=text] { width: 20em; }
p { margin: 1em 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slot-container">
  <div class="slot">
    <label>Time</label>
    <input type='text' class='address_field' />
    <button class="btn-add-slot">
      Add Slot +
    </button>
  </div>
</div>

Answer 4

我只是删除了克隆对象标签和按钮，就是这样。如果您有疑问，请写信。此致

＆＃13;

$(document).ready(function() {
 var slotContainer = '.slot-container';
  
  $(slotContainer).on("click", ".btn-add-slot", function(event) {
    var slot = $(this).closest('.slot');
    copySlot = slot.clone();
    copySlot.find('label, button').remove();
    
    copySlot.prependTo(slotContainer);
   
  });

});

＆＃13;

body {
  padding: 5px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slot-container">

  <div class="slot">
    <label>Time</label>
    <input type='text' class='address_field' />
    <button class="btn-add-slot">
      Add Slot +
    </button>
  </div>
  
</div>

＆＃13;

从克隆中删除标签？

4 个答案: