jQuery-将输入字段中输入的文本显示为动态添加块的标题

带引导模式的jQuery

我正在动态创建信息框，允许用户通过输入文本框键入框标题，并在添加后清除输入

第一次，它按预期工作。。如果我试图再创建一个框，以前创建的框标题也会更改…：(

如何创建每次都具有唯一文本字段的框

HTML

<div class="container wrapper">

  <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">
    <i class="glyphicon glyphicon-plus"></i> Add More
  </button>

  <div class="box-holder clearfix">

  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="title">Title:</label>
            <input type="text" class="form-control" id="title">
          </div>
          <div class="form-group">
            <label for="options">Options:</label>
            <select id="mySelectOptions">
              <option>Option 1</option>
              <option>Option 2</option>
              <option>Option 3</option>
              <option>Option 4</option>
              <option>Option 5</option>
              <option>Option 6</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="addBox" data-dismiss="modal">Add Box</button>
      </div>
    </div>
  </div>
</div>

添加更多
标题：
选项：
选择1
选择2
选择3
选择4
备选案文5
备选案文6
接近
添加框

jQuery

$(document).ready(function () {

  $('#addBox').click(function () {
    $( ".wrapper .box-holder" ).append( '<div class="new-box"><div><label class="box-title">Title: <span></span></label></div><div><label class="box-values">Values: <span></span></label></div></div>' );

   var newTitle = $(".modal-body .form-group #title").val();
   $(".new-box .box-title span").text(newTitle);

    $(".modal-body .form-group #title").val('');

  });       

});

$（文档）.ready（函数（）{
$（'#addBox'）。单击（函数（）{
$（“.wrapper.box holder”）.append（'Title:Values:'）；
var newTitle=$（“.modal body.form group#title”）.val（）；
$（“.new box.box title span”）.text（newTitle）；
$（“.modal body.form group#title”）.val（“”）；
});       
});

这只是因为当你这样做时：

$(".new-box .box-title span").text(newTitle);

您可以针对与此选择器对应的每个html项。此选择器对于每个框都是相同的，因此您只需将它们全部更改。一个好的策略可能是：

$('.new-box:last-of-type .box-title span').text(newTitle);

小提琴：

---

有关

：最后一个类型

选择器的更多信息，您可以查看jQuery官方文档：

这只是因为当您执行此操作时：

$(".new-box .box-title span").text(newTitle);

您可以针对与此选择器对应的每个html项。此选择器对于每个框都是相同的，因此您只需将它们全部更改。一个好的策略可能是：

$('.new-box:last-of-type .box-title span').text(newTitle);

小提琴：

---

有关

：最后一个类型

选择器的更多信息，您可以查看jQuery官方文档：

谢谢@Yann ChabotIt's my荣幸@Reddy，这正确回答了您的问题吗？@Yann Chabot是的..当然..我也接受了您的答案：）我打算建议使用一个新函数，但是你的想法很好，很好，Yann；）@JonathanXXI非常感谢：-）谢谢@Yann ChabotIt这是我的荣幸@Reddy，这正确回答了你的问题吗？@Yann Chabot是的。。当然。。我也接受了你的回答：）我本来打算建议使用一个新函数，但你的想法很好，很好，Yann；）@乔纳森二十一世非常感谢：-）