Question

我通过输入字段动态创建新的div，并通过设置规则删除按钮，因为最多可以创建5个字段。如何动态更新标签文本？

例如，如果我第一次点击+ New，新创建的标签应为Name 1，第二次点击Name 2等。如果删除，则应该同样也（值应动态更新）

虽然我试图通过以下方式获得相同的信息，但它没有按预期工作......

jQuery('.new-label').text('Name ' + x);

Online Demo

var max_fields      = 5;
var wrapper         = jQuery(".input_fields_wrap");
var add_button      = jQuery(".addNewLink");

var x = 1;
jQuery(add_button).click(function(){
  if(x < max_fields){
    x++;
    jQuery(wrapper).append('<div><span class="new-label">Name</span> <input type="text" name="textfield[]" placeholder="Enter name"> <a href="javascript:;" class="remove_field">x Remove</a></div>');
    jQuery('.new-label').text('Name '+x);
  }
});

jQuery(wrapper).on("click",".remove_field", function(){
  jQuery(this).closest('.form-group').remove();
  x--;
})

<div class="input_fields_wrap">
  <div>
    Name
    <input type="text" name="textfield[]" placeholder="Enter name">
    <a href="javascript:;" class="addNewLink">+ New</a>
  </div>
</div>

Answer 1

您需要在创建新元素时更新相关标签，并在删除标签时更新标签，阅读内联评论

var wrapper = jQuery(".input_fields_wrap");
var add_button = jQuery(".addNewLink");

var x = 1;
add_button.click(function() {
    if (x < max_fields) {
        //Create HTML element
        var html = $('<div><span class="new-label">Name</span> <input type="text" name="textfield[]" placeholder="Enter name"> <a href="javascript:;" class="remove_field">x Remove</a></div>');

        x++;

        //Append it
        wrapper.append(html);

        //Update the label
        html.find('.new-label').text('Name ' + x);
    }
});

wrapper.on("click", ".remove_field", function() {
    //remove parent div
    jQuery(this).closest('div').remove();  

    //Relabel them
    var labels = wrapper.find('.new-label');
    labels.text(function(){
        return 'Name ' + (labels.index(this) + 2);
    });
    x--;
})

Answer 2

不是在将标签附加到DOM后更新标签文本，而是在append()方法中更新它，而在remove方法中没有这样的元素.form-group，因此您可以将其更改为{{1 }}：

＆＃13;

div

＆＃13;

var max_fields = 5;
var wrapper = jQuery(".input_fields_wrap");
var add_button = jQuery(".addNewLink");

var x = 1;
jQuery(add_button).click(function() {
  if (x < max_fields) {
    x++;
    jQuery(wrapper).append('<div><span class="new-label">Name' + x + '</span> <input type="text" name="textfield[]" placeholder="Enter name"> <a href="javascript:;" class="remove_field">x Remove</a></div>');

  }
});

jQuery(wrapper).on("click", ".remove_field", function() {
  jQuery(this).closest('div').remove();
  x--;
})

＆＃13;

Answer 3

要实现这一点，最简单的方法是创建一个在添加或删除新span时更新所有div标签的功能。这样，名称中的数字始终是最新的。另请注意，您可以通过使用页面中当前数量的x元素来否定维护div变量的需要。试试这个：

＆＃13;

var max_fields = 5;
var $wrapper = $(".input_fields_wrap");
var $addButton = $(".addNewLink");

$addButton.click(function() {
  var fieldCount = $wrapper.find('> div').length;
  if (fieldCount < max_fields) {
    var $div = $('<div><span class="new-label"></span> <input type="text" name="textfield[]" placeholder="Enter name"><a href="javascript:;" class="remove_field">x Remove</a></div>').appendTo($wrapper);
    updateNames();
  }
});

$wrapper.on("click", ".remove_field", function() {
  $(this).closest('div').remove();
  updateNames();
})

function updateNames() {
  $('.input_fields_wrap span').text(function(i) {
    return 'Name ' + (i + 1);
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <div>
    Name
    <input type="text" name="textfield[]" placeholder="Enter name"> <a href="javascript:;" class="addNewLink">+ New</a>
  </div>
</div>

＆＃13;

Answer 4

你是说这个吗？

我委托了两个链接并删除了丑陋的javascript：; 我也针对div

var max_fields = 5;
$(function() {
  $wrapper = $(".input_fields_wrap");
  $wrapper.on("click",".addNewLink",function(e){
    e.preventDefault();
    var len = $wrapper.find(".new-label").length;
    if(len < max_fields) {
      $wrapper.append('<div><span class="new-label">Name '+(len+1)+'</span> <input type="text" name="textfield[]" placeholder="Enter name"> <a href="#" class="remove_field">x Remove</a></div>');
    }
  });  
  $wrapper.on("click",".remove_field", function(e){
    e.preventDefault();  
    $(this).closest('div').remove();
    $wrapper.find(".new-label").each(function(idx) {
      $(this).text("Name "+(idx+1)); // more elegant to use .text(function(){}) than .each
    });
  });
 });

body{margin:50px;font-family:verdana;font-size:13px;}
div{margin-bottom:15px;}
a:hover{text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <div>
    Name <input type="text" name="textfield[]" placeholder="Enter name"> <a href="#" class="addNewLink">+ New</a>
  </div>
</div>

动态更新新创建的标签号

4 个答案: