2011-08-02 9 views
0

動的なテキスト値を特定の要素に割り当てる必要があります。これは、後である時点でローカライズする必要があるため、作業しているサイト全体に配置できます。JavaScriptでメニューの動的テキストを作成する必要がある

私は理由getElementsByIdで動作しません。これは、全体でtitletitle2 div要素の複数のコピーを持つようにしたい

document.getElementsById('title').innerHTML="Title1 Text"; 
document.getElementsById('title2').innerHTML="Title2 Text"; 

below-しかし、もちろんのようにJSでそれらのリストを作成する期待していました構造。誰にも他の提案や回避策がありますか?

あなたはいつもクラスの代わりに、IDの、

<p class="introText">Title1 Text</p> 
<p class="closingText">Title2 Text</p> 

のようなものを使用することができますし、代わりに一つだけに影響を与えるあなたがそれらのすべてに影響を与える可能性があり、あなただけの1をターゲットにする必要があり、あなたはそれにIDを追加することができます

答えて

1

1。

<p class="introText" id="topIntro">Title1 Text</p> 
<p class="closingText">Title2 Text</p> 
<p class="introText">Title1 Text (again)</p> 
0

idの代わりにclassを使用します。 JavaScriptはデフォルトでgetElementsByClass()関数を持たないので、JQueryのようなものを使用しない限り、関数を自分で定義する必要があります。

document.getElementsByClass = function(class){ 
    var itemsfound = new Array; 
    var elements = document.getElementsByTagName('*'); 
    for(var i=0;i<elements.length;i++){ 
     if(elements[i].className == class){ 
     itemsfound.push(elements[i]); 
     } 
    } 
    return itemsfound; 
} 

これは、指定したクラスの要素の配列を返します。必要に応じて次のコードを使用することができます。

document.getElementsByClass('class'); // gives an array of elements of given class 
document.getElementsByClass('class')[0]; // selects first element in array with given class 

しかし、あなたはjQueryのを使用した場合、それがこれを行うのと同じくらい簡単です:

$('.title').html("Title 1 Text"); 
$('.title2').html("Title 2 Text"); 

は、これはいくつかの方法で役立ちます願っています。歓声

+0

'document.getElementsByClassName'についてはどうですか?クラスごとに要素を取得する必要があります。 –

+0

Firefox、Safari、Opera、IE9の最新バージョンでのみネイティブサポートされています。それはIE8以下で動作するつもりはない – Calvin

+1

私は参照してください。しかし、関数を再定義する前に、おそらくネイティブバージョンを最初に確認する必要があります。 編集: 'document.querySelector'と' document.querySelectorAll'はIE8でサポートされているようです。それもチェックしてください。 –