3

如果我有两个 HTML 元素应该始终包含相同的内部 HTML 文本，那么同时更新它们的最优雅的方法是什么？

例如：

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

我希望 screenTitle 和 pageTitle 的 innerHTML 在 JavaScript 函数更改其中之一时保持相同。

我知道我可以遍历 pageTitle 和 screenTitle 元素，每当我更改字符串“我的应用程序”时更新它们中的每一个，但有没有更优雅的方法？

4

4 回答 4

1

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-24T19:30:05.107 回答
0

使用一个函数来封装对这两个元素的写入。因此，您的其余代码将使用以下函数，而不是直接使用 DOM 方法：

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-24T18:56:39.147 回答
0

只要您控制要修改元素的所有代码，就应该创建一个同时更新两者的 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-24T19:20:27.403 回答
-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-24T19:04:22.947 回答