如何動態地分配一個ID到圖像

var intFields = 0; 
var maxFields = 10; 
function addElement() { 
    "use strict"; 
    var i, intVal, contentID, newTBDiv, message = null; 
    intVal = document.getElementById('add').value; 
    contentID = document.getElementById('content'); 
    message = document.getElementById('message'); 
    if (intFields !== 0) { 
     for (i = 1; i <= intFields; i++) { 
      contentID.removeChild(document.getElementById('strText' + i)); 
     } 
     intFields = 0; 
    } 
    if (intVal <= maxFields) { 
     for (i = 1; i <= intVal; i++) { 
      intFields = i; 
      newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id', 'strText' + intFields); 
      newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>"; 
      contentID.appendChild(newTBDiv); 
      message.innerHTML = "Successfully added " + intFields + " fields."; 
     } 
    } else { 
     for (i = 1; i <= maxFields; i++) { 
      intFields = i; 
      newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id', 'strText' + intFields); 
      newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>"; 
      contentID.appendChild(newTBDiv); 
      message.innerHTML = "Unable to create more than 10 receipient fields!"; 
     } 
    } 
}

我的腳本在這裏動態地添加了10個字段，用戶將能夠輸入一個電子郵件地址，並在文本框的右側添加一個減號圖像調用另一個腳本。我無法確定如何分配和記錄減號。我需要能夠讓減號腳本識別它所在的文本框並將其刪除。我可以很容易地編寫刪除腳本，但我不確定如何告訴圖像刪除哪個文本框。任何幫助，建議或意見，不勝感激。如何動態地分配一個ID到圖像

謝謝，尼克S.

來源

2011-12-13 Nick Savage

您可以將一個類添加到名爲minus的字段中，然後像那樣查看。我會建議使用jQuery這一點。

要添加的類別

$("#element").addClass("minus");

要刪除所有元素與該類

$("body input").each(function (i) { 
    if($(this).attr("class") == "minus"){ 
     $(this).remove(); 
    } 
});

來源

2011-12-13 18:53:27

最好兩個選項，伊莫將是1）DOM遍歷，或2）操縱ID的片段。

在第一種方式下，您將傳遞事件發生元素的引用（減號），然後從那裏導航DOM以獲取適當的文本框（在jQuery中，您可以使用$(this).prev()例）。

在第二種方式下，您需要爲觸發元素的ID（負號）以及與目標元素（文本框）相同的前綴或後綴分配前綴或後綴。然後，您可以（再次）通過簡單的字符串處理來自觸發元素的ID來爲目標元素生成適當的ID。

這足以讓你開始？

來源

2011-12-13 18:49:19 simon

嘗試向字段中添加一個類並將相同的類添加到減號。

所以的setAttribute ID後面添加這一權利，

newTBDiv.setAttribute('class', 'field' + intFields);

然後只是刪除具有該類的任何元素。

來源

2011-12-13 18:52:11

如何動態地分配一個ID到圖像

回答

相關問題