时间戳

首页 > 解决方案 > 我正在尝试使用 jQuery 即时构建独特的输入，但遇到了迭代问题

jquery - 我正在尝试使用 jQuery 即时构建独特的输入，但遇到了迭代问题

问题描述

我正在使用 jQuery 创建一个动态表单，并且我能够为前两个输入提供一个唯一的 data-id，但是当我希望它会继续计数时，第三个会恢复为 data-id 2。谁能看到我做错了什么？

$(document).on('click', '#addSpec', function(e) {

  //if a dynamic input does not exist
  if ($("#spec").data("id") != "1") {

    var id = 1;
    $("#customFields").append('<input type="text" class="form-control" id="spec" name="name1" data-id="' + id + '" placeholder="Spec Name" style="margin-bottom: 20px;">' +
      '<input type="text" class="form-control" id="spec1" name="spec1" placeholder="" style="margin-bottom: 20px">');
  } else {
    //get the last created data-is and add 1
    var id = $("#spec").last().data("id") + 1;
    console.log(id);
    $("#customFields").append('<input type="text" class="form-control" id="spec" name="name' + id + '" data-id="' + id + '" placeholder="Spec Name" style="margin-bottom: 20px;">' +
      '<input type="text" class="form-control" id="spec1" name="spec1" placeholder="" style="margin-bottom: 20px">');
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=customFields>

</div>

<button class="w-50 btn btn-primary btn-lg" type="button" id="addSpec">Add Spec</button>

标签： jquery

解决方案

您id多次使用相同的方法，这是不好的做法！这就是为什么我刚刚id在这个例子中删除了。然后基本上你总是用给定的“id”生成相同的 HTML .. 为什么不这样呢？

$(document).on('click', '#addSpec', function(e) {

  //if a dynamic input does not exist
  var id = $('#customFields input[name^="spec"]').length +1;
  
    $("#customFields").append('<div><input type="text" class="form-control"  name="name1" data-id="' + id + '" placeholder="Spec Name" style="margin-bottom: 20px;">' +
      '<input type="text" class="form-control" name="spec1" placeholder="" style="margin-bottom: 20px"></div>');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=customFields>

</div>

<button class="w-50 btn btn-primary btn-lg" type="button" id="addSpec">Add Spec</button>

注意：没有理由向name属性添加数字，因为您可以为多个输入字段使用相同的名称。只需使用[]行为类似于数据数组的符号即可。使用类似的东西：

<input type="text" class="form-control" name="spec[]" placeholder="">
<input type="text" class="form-control" name="spec[]" placeholder="">

代替：

<input type="text" class="form-control" name="spec1" placeholder="">
<input type="text" class="form-control" name="spec2" placeholder="">

推荐阅读