jQuery点击按钮追加带递增编号div及调整表单边框样式的实现方法

核心修改思路 #

1. 解决Name序号自增问题

原代码的计数变量定义在点击事件内部，每次点击都会重置为1，且多余遍历了按钮元素导致序号异常。调整为将计数变量放在事件外部全局维护，每次点击触发时累加计数即可。

2. 解决独立边框问题

原边框加在父容器#sibs上导致所有表单共用边框，调整为将每组name/age/email字段包裹在独立子容器中，给子容器单独加边框样式，同时移除父容器的边框属性。

完整实现代码 #

新增CSS样式

/* 每组表单独立边框样式 */
.form-group-item {
  border: 2px solid #e0ebeb;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
}

修改后HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 移除原父容器的共用边框 -->
<div id="sibs" class="row">
  <!-- 初始展示的第一组无序号表单，不需要则删除以下静态代码 -->
  <div class="form-group-item col-lg-12">
    <div class="mb-30">
      <label><b>Name</b></label><br>
      <input class="form-control" type="text" placeholder="insert name">
    </div>
    <div class="mb-30">
      <label><b>Age</b></label><br>
      <input class="form-control" type="text" placeholder="insert age">
    </div>
    <div class="mb-30">
      <label><b>Email</b></label><br>
      <input class="form-control" type="text" placeholder="insert email">
    </div>
  </div>
</div>
<br><br><br>
<button type="button" class="btn btn-md btn-info ml-2 button-icon rounded-small add_info"><i class="fa fa-user-plus" aria-hidden="true"></i> Add </button>

修改后JS代码

$(document).ready(function() {
  // 初始计数对应已有的第一组表单，首次点击新增为Name(2)
  let formCount = 1;
  $(".add_info").click(function() {
    formCount++;
    $("#sibs").append(` 
      <div class="form-group-item col-lg-12">
        <div class="mb-30">
          <label><b>Name (${formCount})</b></label><br>
          <input class="form-control" type="text" placeholder="insert name">
        </div>
        <div class="mb-30">
          <label><b>Age</b></label><br>
          <input class="form-control" type="text" placeholder="insert age">
        </div>
        <div class="mb-30">
          <label><b>Email</b></label><br>
          <input class="form-control" type="text" placeholder="insert email">
        </div>
      </div>
    `);
  });
});

注：原代码中输入框类名from-control为拼写错误，已修正为标准Bootstrap类名form-control，若使用自定义类名可改回。

内容的提问来源于stack exchange，提问作者nonutt