Question

我有这段代码（代码段）。如果您输入姓名，则会自动将其添加到下方。

如果您点击＆＃34;添加会员＆＃34;并在附加的输入中键入一个名称，它也出现在下面（在它的各自＆＃34;你好，......＆＃34;）

如果你再次这样做，这次不会起作用，因为jscode仅适用于第一个附加元素。

我的问题是：如何将此jscode应用于第三个或第四个成员，依此类推？

PS。另一个问题：如何使其无法删除第一个输入文本（因此需要至少有一个成员）？

＆＃13;

var name1 = document.getElementById('first');
name1.addEventListener('input', function() {
    var result = document.querySelector('span.one');
    result.innerHTML = this.value;
});

$('.add').click(function() {
    $('.block:last').after('<div class="block"><input type="text" id="X"><span class="remove">Remove member</span><br><br></div>');
    $('.hello:last').after('<div class="hello">Hello, <span class="name"></span><br><br></div>');
    var name1 = document.getElementById('X');
    name1.addEventListener('input', function() {
        var result = document.querySelector('span.name');
        result.innerHTML = this.value;
    });
});

$('.optionBox').on('click', '.remove', function() {
    $(this).parent().remove();
    $('.hello:last').remove();
});

＆＃13;

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
}
span.add, span.remove {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">

    <div class="block">
        <span class="add">Add member</span>
       <br><br>
        
    </div>
    
    <div class="block">
        <input type="text" id="first"> <span class="remove">Remove member</span><br><br>
    </div>


</div>

<div class="newmember">

</div>

<br>

<div class="hello">

Hello, <span class="one"></span><br><br>

</div>

＆＃13;

Answer 1

我为你做了一些锻炼。请检查一下。我想这就是你要找的东西。我为输入和div添加相同的id和类attr以显示内容。

＆＃13;

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".input_fields_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 class ="' + x + '" ><input type="text" class= "' + x + '" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
      $('.hello:last').after('<div class="hello" id = "' + x + '"   >Hello, <span class="name"></span><br><br></div>');

      $('input').on('input', function(e) {

        divtoappend = $(this).attr('class');
        var val = "";
        var val = $(this).val();
        var sel = "#" + divtoappend + " span";
        $(sel).text('');
        $(sel).append(val);
      });

    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    var rem = $(this).parents('div').attr('class');
    $('#' + rem).remove();
    $(this).parent('div').remove();
    x--;
  });


});

＆＃13;

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
    margin : 4px;
}
span.add, span.remove {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" class="1" name="mytext[]"></div>
</div>

<div class="hello" id="1">

  Hello, <span class="1"></span><br><br>

</div>

＆＃13;

Answer 2

好的，我想我们都在想这个：

<div>
    <button id="uxAddMember" class="btn btn-primary">Add Member</button> 
</div>

<div class="container">
    <div class="row" data-id="1">
        <div class="form-control">
            <input type="text" class="name" id="name" /> <span style="padding-left: 10px;"><button class="btn btn-warning">Remove Member</button>
        </div>
     </div>
</div>

<div>
    <span id="uxHello"></span>
</div>

<script type="text/javascript">

    $(document).ready(function() {

        var rows = 1;

        $('#uxAddMember').click(function() {
            $('.container').append($('.row').attr('data-id', rows).html());
            rows++;

        });
     });

     $(document).on('keyup', '.name', function() {
        $('#uxHello').html("Hello, " + $(this).val());
     });

</script>

这不包括您的删除功能，但它会处理名称输出并添加新行。

如何将js代码添加到不同的附加元素？

2 个答案: