자바는 요소에 새로운 속성을 첨부합니다.

Question

저는 div라는 객체를 생성하고 id = X.ID를 할당하는 객체와 객체를 가지고 있습니다. html로 만든 후,이 같은 사업부에 객체를 할당 : 그 문 후 휴식을 설정하면

document.getElementById(X.ID).XValue = X; 

, 나는 document.getElementById(X.ID).XValue을 평가 해와 X.

동안의 모든 속성을 볼 수 있습니다 내가 MOUSE_UP에서 휴식을 설정할 때이 HTML을 생성했다, 나는 지금

var aProp = {}; 
aProp.ThisValue = "This"; 
aProp.ThatValue = "That"; 
aProp.Id = 5; 
var html = '<div id="' + aProp.Id + '"'; 
var func = 'MOUSE_UP'; 
html += ' onmouseup="' + func + '(event) ">'; 
html += '</div>'; 
document.getElementById("test").innerHTML += html; 
document.getElementById(aProp.Id).XVALUE = aProp; 

function MOUSE_UP(event) { 
    alert(event.currentTarget.XValue.ThisValue); 
} 

onmouseup="MOUSE_UP(event)".을 추가, event.currentTarget 내 사업부 (event.currentTarget.id == X.ID)이지만, event.currentTarget.XValue는 정의되지 않습니다.

XValue가 정의되지 않은 이유는 무엇입니까?

Answer 1

innerHTML이 #test 인 것처럼 보인다고 가정하면 사용자 지정 속성을 모두 지울 수 있습니다. jsFiddle에서 확인할 수 있습니다. 그대로 피들을 실행하면 test.innerHTML += ...으로 콘텐츠를 추가 한 후 NewProp이 #1이되고 undefined이됩니다. NewProp 대신 tabIndex을 기록하면 올바른 값을 얻을 수 있습니다.

+= 연산자는 a = a + b과 같은 문구에 대한 바로 가기이므로 a += b이라고 쓸 수 있습니다.

기본적으로 #test의 내부 HTML에서 문자열을 만든 다음 다른 문자열을 추가하고 마지막으로 innerHTML의 #test을이 새 문자열로 바꿉니다. #test의 모든 이전 요소는 사용자 정의 속성이 설정되지 않은 새로운 요소로 바뀝니다.

요소에 대한 속성을 설정 id도 id 특성 때문에 그들은 #testinnerHTML의 일부이며, 역시 새로 작성된 HTML에 추가의 HTML에 추가된다.

innerHTML을 설정하는 대신 적절한 DOM 조작을 사용하면 원하는 결과를 얻을 수 있습니다. 아래 코드는 innerHTML을 설정하는 대신 createElement() 및 appendChild() 메서드를 사용합니다.

function myMouseUp(e) { 
    alert("at MouseUp " + e.currentTarget.NewProp.ThisValue); 
} 

function buildOneDiv(aProp) { 
    var html = document.createElement('div'); 
    aProp.ThisValue = 'This is ' + aProp.id; 
    aProp.ThatValue = 'That is ' + aProp.id; 
    html.id = aProp.id; 
    html.addEventListener('mouseup', myMouseUp, false); 
    html.innerHTML = 'Test ' + aProp.id; 
    return html; 
} 

function buildDivs(x) { 
    var html = buildOneDiv(x); 
    document.getElementById("test").appendChild(html); 
    document.getElementById(x.id).NewProp = x; 
} 

window.onload = function() { 
    var aProp, i; 
    for (i = 1; i < 4; i++) { 
     aProp = {}; 
     aProp.id = i; 
     buildDivs(aProp); 
    } 
}; 

A live demo at jsFiddle.

Answer 2

설명 및 해결 방법이므로 답변이 많지 않습니다.

이 HTML

<div id="test"></div> 

및 최종 결과 그 onMouseUp에 정의 마지막 DIV는 myMouseUp에서 NewProp 대한 정당한 값을 가질 것이라는 것이다 코드

function myMouseUp(e) { 
    alert("at MouseUp " + e.currentTarget.NewProp.ThisValue); 
} 

function buildOneDiv(aProp) { 
    aProp.ThisValue = "This"; 
    aProp.ThatValue = "That"; 
    var html = '<div id="' + aProp.id + '"'; 
    var func = 'myMouseUp'; 
    html += ' onmouseup="' + func + '(event) ">'; 
    html += 'Test ' + aProp.id + '</div>'; 
    return html; 
} 

function buildDivs(x) { 
    var html = buildOneDiv(x); 
    document.getElementById("test").innerHTML += html; 
    document.getElementById(x.id).NewProp = x; 
} 

window.onload = function() { 
    for (var i = 1; i < 4; i++) { 
     var aProp = {}; 
     aProp.id = i; 
     buildDivs(aProp); 
    } 
}; 

주어. 서로 다른 div의 경우이 속성은 정의되지 않습니다. 이것이 내가 "그게 효과가있다"는 것을 보여주는 몇 가지 의견이 있습니다. 그것은 나의 예에서 가지고있는 하나 인 하나를 위해 일합니다. (이것은 설명이다.

myDivs[x.id] = x;

와 buildDivs에

document.getElementById(x.id).NewProp = x;

를 교체

var myDivs = {}; // global 

:)

는

내 해결 방법은 두 문장을 연관 배열을 할 수있는 전역 개체를 추가하고 변경하는 것입니다

a 차

alert(myDivs[e.currentTarget.id].ThisValue);와 myMouseUp에

alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);

를 교체합니다.

나는 여전히 원래의 접근 방식이 작동하지 않는 이유를 알고 싶습니다.