無法動態添加名稱屬性以形成元素

Question

我希望動態添加名稱屬性爲'pickup _city2'和'pickup _地址2'以選擇帶有id，pickup pickup _cityExtend和pickup _ pickup地址的元素。

$('#multiCheck').change(function() { 
 
    if (this.checked) { 
 
    var $pick = $('#cityPickExtend'); 
 
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick); 
 
    var city = document.getElementById('pickup_cityExtend'); 
 
    city.setAttribute('name', 'pickup_city2'); 
 

 
    var address = document.getElementById('pickup_addressExtend'); 
 
    address.setAttribute('name', 'pickup_address2'); 
 
    } 
 
    if (!this.checked) { 
 
    $clone.remove(); 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form class="cityPick form-horizontal form-label-right" action="" method="POST" novalidate>{% csrf_token %} 
 
    <div class="form-group"> 
 
    <div class="city col-md-4 col-sm-4 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="city">City<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <select class="form-control" id="city" name="pick_up_city"> 
 
      <option>Select City</option> 
 
      <option>Mumbai</option> 
 
      <option>Delhi</option> 
 
      <option>Jaipur</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="address col-md-7 col-sm-7 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="address">Address<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="address" name="pick_up_address"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="multiCheck col-md-4 col-sm-4 col-xs-12"> 
 
     <input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point? 
 
     <br> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group hide" id="cityPickExtend"> 
 
    <div class="city col-md-4 col-sm-4 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="city">City<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <select class="form-control" id="pickup_cityExtend" name=""> 
 
      <option>Select City</option> 
 
      <option>Mumbai</option> 
 
      <option>Delhi</option> 
 
      <option>Jaipur</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="address col-md-7 col-sm-7 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="address">Address<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="pickup_addressExtend" name=""> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="removeBtn col-md-1 col-sm-1 col-xs-2"> 
 
     <button type="button" id="removeBtn">Remove</button> 
 
    </div> 
 

 
    <div class="addBtn"> 
 
     <button type="button" id="addBtn">Add another pickup location</button> 
 
    </div> 
 
    </div> 
 

 
    <div class="item form-group"> 
 
    <label for="shipment_datetime" class="control-label dateTime">Pickup Date &amp; time 
 
     <span class="required">*</span> 
 
    </label> 
 

 
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> 
 

 
     <input class="form-control" size="16" name="shipment_datetime" type="text" value="" readonly style="background-color: #fff;"> 
 

 
     <span class="input-group-addon"> 
 
                <span class="glyphicon glyphicon-remove"></span> 
 
     </span> 
 

 
     <span class="input-group-addon"> 
 
                <span class="glyphicon glyphicon-th"></span> 
 
     </span> 
 
    </div> 
 
    </div> 
 

 
</form>

下面是我的jQuery代碼。

$('#multiCheck').change(function() { 
    if (this.checked) { 
    var $pick = $('#cityPickExtend'); 
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick); 
    var city = document.getElementById('pickup_cityExtend'); 
    city.setAttribute('name', 'pickup_city2'); 
    var address = document.getElementById('pickup_addressExtend'); 
    address.setAttribute('name', 'pickup_address2'); 
    } 
    if (!this.checked) { 
    $clone.remove(); 
    } 

}) 

Answer 1

在您克隆的部分中，有四個元素具有id屬性。作爲id值必須是唯一的，DOM API將始終返回第一場比賽，當你查詢某個id，如在這些行：

var city = document.getElementById('pickup_cityExtend'); 
var address = document.getElementById('pickup_addressExtend'); 

結果不匹配您添加到部分元素該文件。

爲了使其正常工作，您需要將id值替換爲唯一的值（例如，通過添加2）。

請注意：您正在將jQuery語法與本機DOM方法混合以檢索元素。如果您不使用document.getElementById，但是jQuery $('#...')等效，則會更一致。

下面是一些調整代碼：

var $clone; 
$('#multiCheck').change(function() { 
    if (this.checked) { 
    var $pick = $('#cityPickExtend'); 
    $clone = $pick.clone().removeClass('hide').removeAttr('id'); 
    // Add '2' to all ID values, and set name value to the same. 
    $clone.find('[id]').each(function() { 
     var id = $(this).attr('id') + '2'; 
     $(this).attr('id', id).attr('name', id); 
    }); 
    // Now that the id value are unique, it is OK to add the clone: 
    $clone.insertAfter($pick); 
    } else if ($clone) { // Check whether we actually have a clone 
    $clone.remove(); 
    } 
});