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 []类型的所有输入（可能之前输入，而不是之后，我不想改变）。

以下代码是一个示例，但是填充了类gcse_year的所有字段，而不仅仅是该类型的后续/下一个字段。

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

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

Answer 1

您可以点击div按钮，在附加的父Add上放置一个公共课程，从而达到您的要求。然后，您可以使用closest()选择div，然后nextAll()以便在find()返回您要修改的GCSE年份输入之前获取它后续的兄弟姐妹。

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

＆＃13;

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);
})

＆＃13;

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

＆＃13;

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

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

1 个答案: