이미지에 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!"; 
     } 
    } 
}

여기 내 스크립트는 사용자가 이메일 주소를 입력 할 수있는 입력란을 동적으로 추가하고 텍스트 상자 오른쪽에 빼기 기호 이미지를 추가합니다 다른 스크립트를 호출합니다. 마이너스 기호를 지정하고 추적하는 방법을 연습하는 데 문제가 있습니다. 빼기 기호 스크립트가 텍스트 상자를 인식하고 제거 할 수 있어야합니다. 제거 스크립트를 쉽게 작성할 수 있지만 제거 할 텍스트를 이미지에 표시하는 방법을 잘 모르겠습니다. 도움, 제안 또는 의견을 크게 주시면 감사하겠습니다.이미지에 ID를 동적으로 할당하는 방법

감사 닉 S.

출처

2011-12-13 Nick Savage

클래스를 빼기라는 입력란에 추가하고 그런 식으로 확인하십시오. 나는 이것을 위해 jquery를 사용할 것을 제안한다.

해당 클래스

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

모든 요소를 제거하려면 클래스

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

을 추가하려면

출처

2011-12-13 18:53:27

개의 최상의 옵션, IMO 1) DOM-탐색, 또는 2) ID 단편을 조작한다.

첫 번째 방법은 이벤트가 발생하는 요소에 대한 참조 (빼기 기호)를 전달한 다음 거기에서 DOM을 탐색하여 적절한 텍스트 상자를 얻는 것입니다 (jQuery에서 $(this).prev()을 사용할 수 있음, for 예).

두 번째 방법에서는 대상 요소 (텍스트 상자)에 동일한 접두사 또는 접미사를 사용하여 트리거 요소의 ID (빼기 기호)에 접두사 또는 접미사를 할당합니다. 그런 다음 트리거 요소에서 ID를 간단히 문자열 조작하여 대상 요소에 대한 적절한 ID를 생성 할 수 있습니다.

시작하기에 충분합니까?

출처

2011-12-13 18:49:19 simon

필드에 클래스를 추가하고 빼기 기호와 동일한 클래스를 추가해보십시오.

그래서

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

는 그냥 클래스가 어떤 요소를 제거의 setAttribute ID 다음에이 권한을 추가합니다.

출처

2011-12-13 18:52:11

이미지에 ID를 동적으로 할당하는 방법

답변

관련 문제