하나의 HTML 요소를 다른 요소로 미러링하는 가장 우아한 방법은 무엇입니까?

항상 동일한 내부 HTML 텍스트를 포함해야하는 두 개의 HTML 요소가있는 경우 동시에 둘 다 업데이트하는 가장 우아한 방법은 무엇입니까? 예를 들어하나의 HTML 요소를 다른 요소로 미러링하는 가장 우아한 방법은 무엇입니까?

<head> 
    <title id="pageTitle">My Application</title> 
</head> 
<body> 
    <h1 id="screenTitle">My Application</h1> 
</body>

나는 자바 스크립트 기능 중 하나를 변경할 때마다 동일하게 유지 screenTitle 및 pageTitle를의 innerHTML을하고 싶습니다.

pageTitle 및 screenTitle 요소를 반복하면서 "My Application"문자열을 변경할 때마다 각 요소를 업데이트 할 수 있다는 것을 알고 있지만보다 우아한 방법이 있습니까?

출처

2013-02-24 Beevik

JavaScript 기능에서 어떻게 수정되고 있습니까? 'pageTitle'에서 innerHTML을 가져 와서'screenTitle' 식별자로 추가 코드를 추가 할 수 없습니다. –

요소는 AJAX onreadystatechange 처리기 함수에 의해 수정됩니다. 이 함수는 페이지 제목을 업데이트하라는 요청을 포함하는 JSON 객체를받습니다. 자바 스크립트의 각 요소를 반복하고 업데이트 할 수 있지만 매우 "하드 코딩 된"방식 인 것처럼 보입니다. – Beevik

사실 js로 둘 다 업데이트하는 것만으로도 충분하다고 생각합니다. 문서getElementById ("pageTitle"). innerHTML = 업데이트; document.getElementById ("screenTitle"). innerHTML = 업데이트; – Stepo

document.title.innerHTML은 읽기 전용입니다 IE에서. 이것은 브라우저 간 방식 일 것입니다 :

document.getElementById('screenTitle').innerHTML = document.title = 'My Application';

대신에 가변 변수를 사용할 수 있습니다.

당신이 정말로 "우아한"(=== 이국적인) 뭔가를해야하는 경우가 setter가 사용할 수 있습니다 : 당신이 제목을 변경해야 할 적

var page = { 
    set title(text) { 
     document.getElementById('screenTitle').innerHTML = document.title = text; 
    } 
};

, 그냥 설정하는 경우 : page.title = newTitle;합니다. 당신이 돌볼 필요가있는 것은 현재 범위에서 page 개체를 참조 할 수 있다는 것입니다. 또한 이것은 최신 브라우저에서만 작동합니다.

출처

2013-02-24 19:30:05 Teemu

두 요소 모두에 대한 쓰기를 캡슐화하는 단일 함수를 사용하십시오. 그래서 그 대신 직접 DOM 메소드를 사용하는 코드의 나머지 부분은 다음과 같은 기능을 사용 :

이/건조하여 말릴/리팩토링/overengineered 싫증을 최적화 할 수 물론

function setTitle(newTitle) 
{ 
    document.getElementById('pageTitle').innerHTML = newTitle; 
    document.getElementById('screenTitle').innerHTML = newTitle; 
}

...

function setTitle(newTitle) 
{ 
    if (setTitle.elements) 
    { 
     var id = document.getElementByIdl 
     setTitle.elements = [id('pageTitle'), id('screenTitle')]; 
    } 

    setTitle.elements.forEach(function (elt) 
    { 
     elt.innerHTML = newTitle; 
    }); 
}

출처

2013-02-24 18:56:39

-1

사용하여 jQuery를 :

$('#pageTitle').bind('DOMSubtreeModified', function() { 
    if ($('#pageTitle').html() != $('#screenTitle').html()) 
     $('#screenTitle').html($('#pageTitle').html()); 
}); 

$('#screenTitle').bind('DOMSubtreeModified', function() { 
    if ($('#pageTitle').html() != $('#screenTitle').html()) 
     $('#pageTitle').html($('#screenTitle').html()); 
});

출처

2013-02-24 19:04:22 sssilver

저자는 JQuery를 사용하고 있다고 말하지 않았습니다. –

당신은 둘을 업데이트하는 JS 방법을 확인해야합니다 동시에 요소를 수정하려는 모든 코드를 제어 할 수 있어야합니다. 뭔가 같은 :

function updateElementGroup(newInnerHTML) { 
    document.getElementById('pageTitle').innerHTML = newInnerHTML; 
    document.getElementById('screenTitle').innerHTML = newInnerHTM; 
}

이처럼 사용할 수있는 :

당신이 하나가 변경 될 때마다 잡기 위해 일부 청취자를 설정하고 다른 사람을 업데이트 할 수있는 모든 코드를 제어하지 않으면

updateElementGroup('New Text');

이런 따라 하나, 뭔가 :

var isUpdating = false; 
var elements = [ 
    document.getElementById('pageTitle'), 
    document.getElementById('screenTitle'), 
]; 

for (i in elements) { 
    elements[i].addEventListener('DOMCharacterDataModified', function(evt) { 
     if (isUpdating) { 
      return; 
     } 

     isUpdating = true; 

     for (i in elements) { 
      elements[i].innerHTML = evt.newValue; 
     } 

     isUpdating = false; 
    }); 
}

출처

2013-02-24 19:20:27

하나의 HTML 요소를 다른 요소로 미러링하는 가장 우아한 방법은 무엇입니까?

답변

관련 문제