如何在每组输入中动态添加数组 ID

Question

我正在使用添加和删除按钮动态生成一组字段。

我希望组 id 作为数组组中的输入名称数组标识符， 就像当我点击添加时，它会添加一组输入字段。

应该是这样的：

<input name="daydetails[1][dayno]">
<textarea name="daydetails[1][activity]"></textarea>

点击下一步添加时，应该是这样的：

<input name="daydetails[2][dayno]">
<textarea name="daydetails[2][activity]"></textarea>

下面是我的 HTML 部分，其中包含带有一组输入字段的 div：

<div id="type_container"> </div>
<div id="fieldgroup" class="hide">
  <div class="row form-group type-row" id="">
    <div class="col-md-2 control-label">
      <label for="username" class="control-label">
        Day # :
      </label>
    </div>
    <div class="col-md-10">
      <input type="text" placeholder="Day No" name="daydetails[][dayno]">
    </div>
    <div class="col-md-2 control-label">
      <label for="username" class="control-label">
        Description :
      </label>
    </div>
    <div class="col-md-10">
      <textarea class="tinymce-enabled-message-new" cols="90" rows="10" id=""
        name="daydetails[][activity]">Test Input</textarea>
    </div>
    <div class="col-md-1 control-label">
      <a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)">
        <i class="glyphicon glyphicon-trash">
        </i>
      </a>
    </div>
  </div>
</div>

这是我的JQuery 脚本部分：

<script type="text/javascript">
  $(document).ready(function() {
    function applyMCE() {
      tinyMCE.init({
        mode: "textareas",
        editor_selector: "tinymce-enabled-message"
      });
    }

    function AddRemoveTinyMce(editorId) {
      if (tinyMCE.get(editorId)) {
        tinyMCE.EditorManager.execCommand("mceFocus", false, editorId);
        tinyMCE.EditorManager.execCommand("mceRemoveEditor", true, editorId);
      } else {
        tinymce.EditorManager.execCommand("mceAddEditor", false, editorId);
      }
    }
    applyMCE();
    $("a.toggle-tinymce")
      .die("click")
      .live("click", function(e) {
        AddRemoveTinyMce("description1");
        var lbl = $(this).text() == "Off" ? "On" : "Off";
        $(this).text(lbl);
      });
    $("a.add-type")
      .die("click")
      .live("click", function(e) {
        e.preventDefault();
        var content = jQuery("#fieldgroup .type-row"),
          element = null;
        for (var i = 0; i < 1; i++) {
          element = content.clone();
          var divId = "id_" + jQuery.now();
          element.attr("id", divId);
          element.find(".remove-type").attr("targetDiv", divId);
          element
            .find(".tinymce-enabled-message-new")
            .attr("id", "txt_" + divId);
          element.appendTo("#type_container");
          AddRemoveTinyMce("txt_" + divId);
        }
      });

    jQuery(".remove-type")
      .die("click")
      .live("click", function(e) {
        var didConfirm = confirm("Are you sure You want to delete");
        if (didConfirm == true) {
          var id = jQuery(this).attr("data-id");
          var targetDiv = jQuery(this).attr("targetDiv");
          jQuery("#" + targetDiv).remove();
          // }
          return true;
        } else {
          return false;
        }
      });
  });
</script>

Answer 1

要解决此问题，您可以使用JQuery append 和remove 函数。我建议您使用button 而不是a。使用hyperlink 是可以的，但它在语义上是不正确的。仅供参考die 已被折旧，自 1.9 版以来已被删除。因此，这里不需要，$(...).on('click', ..) 可以。你可以看到完整的working codepen here，我使用的是按钮而不是超链接。

HTML 示例

<div id="inputsContainer" class="col-md-10">
  <input type="text" placeholder="Day No" name="daydetails[][dayno]" />
</div>

<div id="textareasContainer" class="col-md-10">
  <textarea class="tinymce-enabled-message-new" cols="40" rows="3" name="daydetails[][activity]">
    Test Input
  </textarea>
</div>
<div>
  <button onclick="onAddClick()">Add</button>
  <button onclick="onRemoveClick()">Remove</button>
</div>

Javascript

<script type="text/javascript">
  const dayDetails = [{ dayno: "dayno-0", activity: "activity-0" }];

  function generateInput(name) {
    return '<input type="text" placeholder="Day No" name="' + name + '" />';
  }

  function generateTextarea(name) {
    return (
      '<textarea class="foo-bar" cols="40" rows = "3" name="' + name + '">'
    );
  }

  function onRemoveClick() {
    const item = dayDetails.pop();
    const dayno = item.dayno;
    const activity = item.activity;

    try {
      $('input[name=' + dayno + ']').remove();
      $('textarea[name=' + activity + ']').remove();
    } catch (e) { }
  }

  function onAddClick() {
    const dayno = dayDetails.length;
    const activity = 'activity-' + dayDetails.length;
    dayDetails.push({ dayno: dayno, activity: activity });
    $("#inputsContainer").append(generateInput(dayno));
    $("#textareasContainer").append(generateTextarea(activity));
  }
</script>