Добавление html для создания входов с другим порядком - PullRequest
Новая
       1

Добавление html для создания входов с другим порядком

0 голосов
/ 13 ноября 2018

У меня есть HTML с тремя входами, как:

enter image description here

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, как показано на следующем рисунке:

enter image description here

Что я там не так делаю?Привет

1 Ответ

0 голосов
/ 13 ноября 2018

Что плохого в том, что вы добавляете свой новый #item-list1 div к существующему #item-list0, превращая его во вложенную структуру.

То же самое относится к вашему #claim-list, оно стало вложенной структурой: 

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

Вместо этого вы должны добавить их снаружи:

  1. Добавить новый #item-listx к <body></body> или любой другой родительский элемент.
  2. Добавить новый#claim-list к соответствующему #item-list с.

Таким образом, это будет ваша предполагаемая структура: 

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

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

И если вы посмотрите на это, возникнет еще несколько проблемс вашим кодом:

  1. Вы будете дублировать id.
  2. 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>

Чтобы узнать больше о области видимости, прочитайте этот удивительный ответ .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...