最优雅的方式有一个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元素镜像另一个？

回答

相关问题