遞增字段集的ID有時會導致重複

我試圖以允許增加或減少爲幾個不同的部分輸入字段的數量。如下面的代碼所示，只有2個部分，每個創建的字段集都應該有一個唯一的ID以允許刪除它。遞增字段集的ID有時會導致重複

我觀察到的ID並非總是唯一的，但它是不相符的。有時我可以在兩個組之間添加10個字段集，並且不會獲得任何重複的ID和其他時間，我將開始在第2個或第3個字段集中添加重複項。

如在重複的ID開始加入的第三字段集時發生這種特定情況下顯示的圖像的下方。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Testing Fieldset Add/Delete</title> 
 
    <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
    <script type="text/javascript"> 
 
    function AddGroup1() { 
 

 
     newFS = newFieldset(); // build a new fieldset ID to use 
 
     infield = '<fieldset id="' + newFS + '"><label for="group1new">Group 1</label>'; 
 
     infield += '<input type="text" name="group1[]" value="0" size="15" maxlength="15" />'; 
 
     infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">'; 
 
     infield += 'Delete</a></fieldset>'; 
 

 
     var div = document.getElementById('moregroup1'); 
 
     div.innerHTML += infield; 
 

 
    } // end of the AddGroup1 function 
 

 
    function AddGroup2() { 
 

 
     newFS = newFieldset(); // build a new fieldset ID to use 
 
     infield = '<fieldset id="' + newFS + '"><label for="group2new">Group 2</label>'; 
 
     infield += '<input type="text" name="group2[]" value="0" size="15" maxlength="15" />'; 
 
     infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">'; 
 
     infield += 'Delete</a></fieldset>'; 
 

 
     var div = document.getElementById('moregroup2'); 
 
     div.innerHTML += infield; 
 

 
    } // end of the AddGroup2 function 
 

 
    function newFieldset() { 
 

 
     var fpoint = 1; // fieldset ID pointer so we may address each one individually 
 
     var ids = $("fieldset[id^='newFieldset_']").map(function() { // get any already there 
 
     var partsArray = this.id.toString().split('_'); // break into pieces 
 
     fpoint = partsArray[1]; // first element of the resulting array should be a number 
 
     fpoint++; // increment by one 
 

 
     }).get(); // end of the map 
 
     return "newFieldset_" + fpoint; // give the caller the new fieldset ID 
 

 
    } // end of the newFieldset function 
 

 
    function deleteID(id2Delete) { 
 

 
     var deleteID = document.getElementById(id2Delete.id); 
 
     deleteID = deleteID.id; 
 
     $("#" + deleteID).remove(); 
 

 
    } // end of the deleteID function 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Testing Fieldset Add/Delete</h1> 
 
    <form method="post" action="WeedsTest.html"> 
 

 
    <fieldset> 
 
     <label for="group1">Group 1</label> 
 
     <input type="text" name="group1[]" value="0" size="15" maxlength="15" /> 
 
     <a href="#" onclick="AddGroup1();return false;" title="Add Additional Group 1">Add</a> 
 
    </fieldset> 
 

 
    <div id="moregroup1"></div> 
 

 
    <fieldset> 
 
     <label for="group2">Group 2</label> 
 
     <input type="text" name="group2[]" value="0" size="15" maxlength="15" /> 
 
     <a href="#" onclick="AddGroup2();return false;" title="Add Additional Group 2">Add</a> 
 
    </fieldset> 
 

 
    <div id="moregroup2"></div> 
 

 
    </form> 
 
</body> 
 

 
</html>

來源

2017-05-30 Dave

哪些是對的ID，它是使刪除按鈕的作用？我將使用字段集中的刪除按鈕的相對位置來定位字段集元素並完全跳過標識符。 – James

是的，這些ID是用於刪除按鈕的。不確定你在第二句話中提出的建議。除第一個字段外，每個字段都有一個刪除選項。我無法找到將刪除按鈕與沒有該ID的特定字段關聯的方法。 – Dave

您應該嘗試使用jQuery，因爲您可以在幾個地方縮短代碼。例如，您可以使用[.clone]（https://api.jquery.com/clone/）來複制元素。並利用[事件委託]（https://learn.jquery.com/events/event-delegation/#event-propagation）來動態創建元素。 – Mikey

這裏有一個快速變化的使用相對位置來定位字段集刪除。你的刪除按鈕更改爲：

<a href="#" onclick="deleteID(this);return false"......

而且你deleteID功能變得

function deleteID(button) { 

    var fieldset = $(button).parent(); 
    $(fieldset).remove(); 

}

來源

2017-05-30 13:58:50 James

謝謝詹姆斯。這解決了問題，並且不需要嘗試計算更清潔的唯一ID。在真正的代碼中還有一個AJAX調用，所以每一點點加速事情真的有幫助。 – Dave

嘿戴夫 - 是的相對定位是這樣的，你基本上是一遍遍添加相同的HTML作爲一個單元的情況下非常有用的。還有更多的花樣來學習，如果你的HTML變得更加複雜，你不能找出相對部分是如何工作的看看jQuery的['closest'（https://api.jquery.com/closest/）。祝你好運。 – James

謝謝詹姆斯。我實際上開始嘗試使用最接近的練習，但無法使其工作（可能是由於我對jQuery缺乏經驗）。克隆和最親密的關係，我會看我怎麼緊湊能得到這個:) – Dave

遞增字段集的ID有時會導致重複

回答

相關問題