递增类/ ID，以将功能传递给克隆的元素

问题描述

我有一段代码，其中包含一个下拉列表和3个只读输入字段。输入字段是使用javascript填充的，使用下面的代码本身可以很好地工作-

$(document).on('change','.unit',function(e) {

//Getting Value
var role = $('.unit option:selected').data('role');
    var power = $('.unit option:selected').data('power');
    var type = $('.unit option:selected').data('type');


//Setting Value
$(".role").val(role);
    $(".power").val(power);
    $(".type").val(type);
});

我想使用此代码克隆元素-

 //define template
var template = $('.duplicate-sections .form-section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click','.addsection',function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone(true,true).find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for',newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('.duplicate-sections');
    return false;
});

//remove section
$('.duplicate-sections').on('click','.remove',function() {
    //fade out section
    $(this).closest('.form-section').fadeOut(300,function(){
    $(this).closest('.form-section').empty();
    });
    return false;
}); 

克隆过程起作用，并且下拉列表和输入被克隆。但是，在填充克隆的输入字段时，它将使用父级的值而不是克隆的值。

我的html是-

<div class="duplicate-sections">
            <div class="form-section">
        <div class="form-group row">
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right">Unit Type</label>
<div class="col-sm-3">
   <select name="unit" id="unit" class="form-control unit"><option value="">Select</option><option 
data-role="HQ" data-power="4" data-type="Company Commander" value="1">Ehrwig Arellano</option>
<option data-role="HQ" data-power="6" data-type="Company Commander" value="2">Ehrwig 
Arellano</option>
<option data-role="HQ" data-power="2" data-type="Tempestor Prime" value="3">Tempestor Prime</option>
</select></div>
    <div class="col-sm-2 increment_controls">
    <input type="text" id="role" name="role" class="form-control role" readonly placeholder="Role">
</div>
            <div class="col-sm-1 increment_controls">
    <input type="text" id="power" name="power" class="form-control power" readonly placeholder="PL">
</div> 
            <div class="col-sm-3 increment_controls">
    <input type="text" id="type" name="type" class="form-control type" readonly placeholder="Type">
</div>
            
</div>
        
                <label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right"> 
</label><input class="remove col-sm-9" type="button" value="Remove Unit"></input>
      </div>
        </div>
        <label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right"></label> 
<input class="addsection col-sm-9" type="button" value="Add Unit"></input>

整个内容都可以在这里找到-JSFiddle

解决方法

您需要更新Unit的更改事件处理程序脚本，因为您只需要更新相关表单部分中的输入字段，而不必更新所有输入字段。

请参见下面的代码

$(document).on('change','.unit',function(e) {
   
    //Getting Value
    var $option = $(this).find('option:selected');
    var role = $option.data('role');
        var power = $option.data('power');
        var type = $option.data('type');
    
    
    //Setting Value
    var $parent = $(this).closest('.form-section');
    $parent.find(".role").val(role);
        $parent.find(".power").val(power);
        $parent.find(".type").val(type);
    });

Demo JSFiddle