将字段的内容复制到其下方的所有动态生成的类型字段

Question

所以我有一系列使用以下代码动态生成的输入：-

$(document).ready(function() {
    var max_fields      = 16; //maximum input boxes allowed
    var wrapper         = $(".GCSE_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div style="margin-top: 5px;"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" id="GCSESubject[]" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one" id="SubjectLevel[]" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]" id="SubjectGrade[]" class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one gcse_year" id="GCSEYear[]" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>'); //add input box
            $
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

我想做的是创建一个函数来复制 GCSEYear[] 的值（点击 C 按钮旁边的输入），并将该值复制到所有后续的 GCSEYear[] 输入中存在，但不是所有 GCSEYear[] 类型的输入（可能之前有输入，而不是之后，我不想更改）。

以下代码是一个示例，但会填充 class gcse_year 的所有字段，而不仅仅是该类型的 subsequent/next 字段。

$(document).ready(function(){
$('a[id^="copy_gcse_all"]').click(function(){
    $('.gcse_year input').val($(this).closest('div').find('.gcse_year input').val())
});

我知道这是一件相对简单的事情，但如果有人能指出正确的方向，我将不胜感激。

Answer 1

您可以通过在单击 Add 按钮时附加的父 div 上放置一个公共 class 来实现您的要求。然后，您可以使用 closest() 到 select 那 div，然后 nextAll() 在 find() returns GCSE 年份输入你之前得到它的后续兄弟姐妹想修改。

这是一个完整的工作示例，其中包含对逻辑的其他几项改进：

var max_fields = 16;
var $wrapper = $(".GCSE_wrap");
var $add_button = $(".add_field_button");

$add_button.click(function(e) {
  e.preventDefault();
  if ($wrapper.find('> div').length < max_fields) {
    $wrapper.append('<div style="margin-top: 5px;" class="wrapper-item"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]"  class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one gcse_year" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>');
  }
});

$wrapper.on("click", ".remove_field", function(e) { //user click on remove text
  e.preventDefault();
  $(this).parent('div').remove();
}).on('click', '.copy_gcse_all', function(e) {
  e.preventDefault();
  var $wrapperItem = $(this).closest('.wrapper-item');
  var year = $wrapperItem.find('.gcse_year').val();
  $wrapperItem.nextAll('.wrapper-item').find('.gcse_year').val(year);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add_field_button">Add</button>
<div class="GCSE_wrap"></div>

另请注意，我从 HTML 长字符串 append() 中删除了所有 id 属性，因为这会导致多个元素共享相同的 id无效 HTML.

将字段的内容复制到其下方的所有动态生成的类型字段

Copy contents of field to all dynamically generated fields below it of type

javascript

jquery

dynamic

copy

next