Question

我有一个带有三个输入的html，例如：

HTML：

<div class="form-group" id="item-list0">
    <label>Role Name</label>
    <input asp-for="RoleClaimList[0].Role.Name" class="form-control roles" />
    <div id="claim-list0">
        <label>Claim Type</label>
        <input asp-for="RoleClaimList[0].ClaimList[0].Type" class="form-control claimType" />
        <label>Claim Value</label>
        <input asp-for="RoleClaimList[0].ClaimList[0].Value" class="form-control claimValue" />
    </div>
    <a href="#" id="addClaim">Add another claim</a>
</div>

<a href="#" id="add">Add another role</a>

如您所见，我有两个操作“添加其他角色”和“添加其他声明”

如果我按添加其他声明，它只会复制Claim Type和Claim Value输入

如果我按“添加其他角色”，它将再次添加所有输入

我用Jquery实现了这一点：

<script>
    $(function () {
        var roleIndex = 0;
        var claimIndex = 0;
        $("#add").click(function (e) {
            e.preventDefault();
            roleIndex = roleIndex + 1;
            claimIndex = 0;
            var n = '<div id="item-list' + roleIndex +'"><label>Role Name</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].Role.Name" /></div>'
            var m = '<div id="claim-list' + roleIndex+'"><label>Claim Type</label><input class="form-control"  name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
            var c = '<label>Claim Value</label><input class="form-control"  name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" />  </div>'
            $("#item-list" + (roleIndex - 1) + "").append(n);
            $("#claim-list" + (roleIndex - 1) + "").append(m);
            $("#claim-list" + (roleIndex - 1) + "").append(c);
        });

        $("#addClaim").click(function (e) {
            e.preventDefault();
            claimIndex = claimIndex + 1;
            var m = '<div id="claim-list' + claimIndex + '"><label>Claim Type</label><input class="form-control"  name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
            var c = '<label>Claim Value</label><input class="form-control"  name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" />  </div>'
            $("#claim-list" + (claimIndex - 1) + "").append(m);
            $("#claim-list" + (claimIndex - 1) + "").append(c);
        });

    });
</script>

如果我添加声明，它可以正常工作。当我添加新角色时问题开始。它应该按照与第一个树输入相同的顺序复制第一个树输入，但是首先创建Claim Type然后创建Claim Value，最后创建Role Name如下图所示：

我在那里做错了什么？问候

Answer 1

出问题的是，您要将新的#item-list1 div附加到现有的#item-list0中，使其成为嵌套结构。

对您的#claim-list进行相同操作，它变成了嵌套结构：

#item-list0
⤷ #claim-list0
  ⤷ #claim-list1
  ⤷ #claim-list2
  ⤷ #claim-list3
⤷ #item-list1
⤷ #item-list2
⤷ #item-list3

相反，您应该将它们附加到外部：

将新的#item-listx附加到<body></body>或任何父元素上。
将新的#claim-list附加到其对应的#item-list。

这将是您想要的结构：

#item-list0
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2

#item-list1
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2

如果您仔细看一下，您的代码还会出现一些其他问题：

您将复制id。
claimIndex将无法正常工作，因为每次单击#add时都会将其重置（如果在添加新角色后单击“ addClaim”到以前的角色会发生什么情况？）

下面是一个可以正常工作的示例代码（我认为，实际上可能不是您的用例）。我已经对其进行了重组，以便无需过多解释即可轻松理解它。请根据需要进行修改以适合您的实际代码库：

var roleIndex = 0;

$('#add')
  .on('click', addRole) // Add onclick handler
  .trigger('click');    // Trigger it on execution to create the first set

function addRole(){
  roleIndex += 1;

  // Set `claimIndex` here, not outside of the scope
  // because you need it in each separate added role
  // so that the claimIndex of each role can correctly counts independently
  var claimIndex = 0,
      roleClaimList = 'RoleClaimList[' + roleIndex + ']';

  var $itemList = $('<div></div>')
    .addClass('form-group')
    .attr('id', 'item-list-' + roleIndex);

  var $roleLabel = $('<label></label>')
    .text('Role Name')
    .appendTo($itemList);

  var $roleInput = $('<input>')
    .addClass('form-control roles')
    .attr('asp-for', roleClaimList + '.Role.Name')
    .appendTo($itemList);

  var $addClaimButton = $('<a></a>')
    .text('Add another claim')
    .attr('href', '#')
    .addClass('addClaim')
    .on('click', addClaim)
    .appendTo($itemList);

  $addClaimButton.trigger('click');

  $itemList.insertBefore(this);

  // Create this function here, not outside
  // because it needs the `claimIndex` in scope
  function addClaim(e){
    e.preventDefault();
    claimIndex += 1;

    var $claimGroup = $('<div></div>')
      .attr('id', 'claim-list-' + roleIndex + '-' + claimIndex)
      .insertBefore($addClaimButton);

    var $typeLabel = $('<label></label')
      .text('Claim Type')
      .appendTo($claimGroup);

    var $typeInput = $('<input>')
      .addClass('form-control claimType')
      .attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Type')
      .appendTo($claimGroup);

    var $valueLabel = $('<label></label')
      .text('Claim Value')
      .appendTo($claimGroup);

    var $valueInput = $('<input>')
      .addClass('form-control claimValue')
      .attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Value')
      .appendTo($claimGroup);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group" id="item-list-0"></div>
<a href="#" id="add">Add another role</a>

要了解有关范围界定的更多信息，请阅读此amazing answer。

附加html创建具有不同顺序的输入

1 个答案: