Question

我有一个包含多个项目列表的表单。用户需要能够向每个列表添加更多项目，还需要向表单添加更多列表。我的问题是我需要每个输入“名称”和列表“id”是不同的。

这就是我所拥有的：

HTML：

<div class="form">
    <h4>
    List 1
    </h4>
    <ul id="list">
      <li>Item 1 <input></li>
    </ul>
    <button id="addItem">
      Add Item
    </button>

  </div>

    <button id="addList">
      Add List
    </button>  
</body>

JQuery的：

//add List Item
itemNumber = 2;

$("#addItem").click(function(){

newItem = "<li>Item "+ itemNumber +" <input></li>";

     $('#list').append(newItem);

     itemNumber = itemNumber + 1;
})



//add another list
listNumber = 2;

$("#addList").click(function(){

newList = "<h4>List "+ listNumber +"</h4> <ul id='list'> <li>Item 1</li> </ul> <button id='addItem'>Add Item</button>";

     $('.form').append(newList);

     listNumber = listNumber + 1;    
})

目前，在您向表单添加其他列表后，代码将不会添加更多项目。

Here is a JSFiddle.

如何为列表和输入提供唯一的名称和ID？

*注意：我发现HTML不是真正的表单。对于JSFiddle，这种方式更容易。

Answer 1

看起来您正在尝试创建列表列表。

我认为最好使用数组，这样您就可以将列表的索引映射到该列表中的项目数。然后你有两个操作：

添加列表 - 添加到数组
将项目添加到列表中 - 使用列表索引，递增计数

这意味着索引0是列表1.而在索引0处，您有项目数的计数。

var lists = []; // array maps index list to item count

function getNextItem(index) {
  return `<li>Item ${++lists[index]} <input /></li>`;
}

function getNextList() {
  lists.push(0);
  var index = lists.length - 1;
  return `<h4>List ${lists.length}</h4>
  <ul class="list">
    ${getNextItem(index)}
  </ul>
  <button class="addItem" data-index=${index}>Add Item</button>`;
}

$(document).on('click', '.addItem', function() {
  var index = $(this).data('index');
  var html = getNextItem(index);
  $(this).prev('.list').append(html);
})

$(document).on('click', '.addList', function() {
  var html = getNextList();
  $('.form').append(html);
});

// Initialize the first item
$('.addList').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form"></div>
<button class="addList">Add List</button>

我还触发了一次点击以初始化第一个列表，因此代码是DRY。

Answer 2

替换以下功能

$("#addItem").click(function(){
    newItem = "<li>Item "+ itemNumber +" <input></li>";

    $('#list').append(newItem);
    itemNumber = itemNumber + 1;
});

用这个：

$(document).on('click', '#addItem', function() {
    var newItem = "<li>Item "+ itemNumber +" <input></li>";

    $(this).prev().append(newItem);
    itemNumber = itemNumber + 1;
});

这将监视稍后使用addItem ID添加到文档中的任何新项目。执行此操作时，您会注意到“添加列表”按钮开始工作以及添加项目。这是因为我没有通过其ID获取列表，我使用它在DOM中的位置找到列表。

BTW，要设置输入的名称，可以使用jQuery的attr实用程序函数，如下所示：

$('#myInput').attr('name', 'my_desired_name');

或者您可以简单地修改构建输入的字符串：

var newItem = "<li>Item "+ itemNumber +" <input name='" + desiredName + "'></li>";

将项目动态添加到列表时增加类和ID

2 个答案: