將項目動態添加到列表時遞增類和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;  
}) 

目前的代碼不會增加更多的項目，一旦你添加了另一個列表的形式。

Here is a 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>

我也引發了點擊初始化第一個列表，使代碼是乾的。

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>";