動態將項目添加到列表時，增加類和ID

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;    
})

當前，一旦您向表單添加了另一個列表，該代碼就不會添加更多項。

這是一個JSFiddle。

如何為列表和輸入賦予唯一的名稱和ID？

*注意：我意識到HTML並非實際形式。 對於JSFiddle來說，這種方式更容易。

Answer 1

您似乎正在嘗試創建列表列表。

我認為最好使用數組，以便可以將列表的索引映射到該列表中的項目數。 然后您有兩個操作：

1. 添加列表-添加到數組
2. 將項目添加到列表-使用列表索引，增加計數

這意味着索引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中的位置來查找列表。

順便說一句，要設置輸入的名稱，可以使用jQuery的attr實用程序函數，如下所示：

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

或者，您可以簡單地在構造輸入的地方修改字符串：

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