最優雅的方式有一個HTML元素鏡像另一個？

如果我有，應始終包含相同的內部HTML文本兩個HTML元素，什麼是在同一時間更新他們兩個最優雅的方式？最優雅的方式有一個HTML元素鏡像另一個？

例如：

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

我想screenTitle和PAGETITLE的innerHTML保持相同每當JavaScript函數改變它們中的一個。

我知道我可以通過PAGETITLE和screenTitle元素迭代，更新他們每個人，每當我改變字符串「我的應用」，但有一個更優雅的方式？

來源

2013-02-24 Beevik

他們是如何被從JavaScript函數修改？難道你不能添加額外的代碼來從'pageTitle'獲取innerHTML並將其設置爲'screenTitle'標識符。 – 2013-02-24 18:56:58

的元件由一個AJAX的onreadystatechange處理函數修改。該函數接收包含更新頁面標題的請求的JSON對象。我知道我可以迭代JavaScript中的每個元素並更新它們，但它似乎是一種非常「硬編碼」的方法。 – Beevik 2013-02-24 19:03:55

我其實認爲用js更新都足夠優雅。文件。getElementById（「pageTitle」）。innerHTML = update; document.getElementById（「screenTitle」）。innerHTML = update; – Stepo 2013-02-24 19:13:09

document.title.innerHTML在IE中是隻讀的。這應該是一個跨瀏覽器的方法：

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

取而代之的是文字值，你可以ofcourse使用一個變量。

如果你真正需要的東西「優雅」（===外來），你可以使用一個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方法，你的代碼的其餘部分將使用功能，如：

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

當然，這可以優化/ DRYed /重構/過度設計令人作嘔......

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。 – 2013-02-24 19:17:00

你應該做一個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元素鏡像另一個？

回答

相關問題