3

常に同じ内部 HTML テキストを含む必要がある 2 つの HTML 要素がある場合、両方を同時に更新する最もエレガントな方法は何ですか?

例えば：

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

JavaScript 関数がそれらのいずれかを変更するたびに、screenTitle と pageTitle の innerHTML を同一のままにしたいと考えています。

文字列「My Application」を変更するたびに、pageTitle 要素と screenTitle 要素を反復処理してそれぞれを更新できることはわかっていますが、もっとエレガントな方法はありますか?

4

4 に答える 4

1

document.title.innerHTMLIE では読み取り専用です。これはクロスブラウザの方法であるはずです：

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

要素を変更するすべてのコードを制御できる限り、両方を同時に更新する 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 に答える
0

両方の要素への書き込みをカプセル化する単一の関数を使用します。したがって、DOM メソッドを直接使用する代わりに、残りのコードでは次のような関数を使用します。

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

もちろん、これは最適化/DRY/リファクタリング/オーバーエンジニアリングされた、うんざりするようなものかもしれません...

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 に答える
-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 に答える