-1

3 つのコンテナーに 3 つのボタンがあるページがあります。各コンテナの最初のボタンには同じ があり、id各コンテナの 2 番目のボタンには同じ がidあり、各コンテナの 3 番目のボタンには同じ がありidます。Javascript受信情報を受け取り、それに応じてボタンのテキストの色を変更するスクリプトがあります。残念なことに、スクリプトが変更を行う必要があることを感知し、対応する CSS を適用しようとすると、最初のコンテナーのボタンのみに CSS が適用されます。id同じ要素を持つすべての要素に CSS が適用されない理由が本当にわかりません。

Javascriptアクション:

document.getElementById('button_1').className = "buttonActive";

ボタン要素:

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>
4

5 に答える 5

5

これは、指定された で見つかった最初のdocument.getElementById要素をが返すために発生しています。id

これは、ID が一意であると想定されているためです。

代わりにクラス名を使用することを検討し、次のように選択します。

document.getElementsByClassName( 'text' )
于 2012-10-18T20:03:02.670 に答える
2

を使用して選択できる dom 要素は 1 つだけgetElementByIdです。複数の要素を選択する場合は、id の代わりに class を使用する必要があります。

同じドキュメント内の 2 つ以上の要素に同じ ID を使用しないでください。

注：すべてのボタンのidをクラスに置き換えました。同じことをスパンにも適用する必要があります。

変更されたコード:

JS:

document.getElementsByClassName('button_1').className = "buttonActive";

HTML:

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>
于 2012-10-18T20:02:38.047 に答える
1

DOM では、すべての要素に一意の ID が必要です。同じ ID を持つ複数の要素に対して "document.getElementById()" を実行すると、最初のオブジェクトのみが返されます。

代わりに、メソッドで「name」属性を使用してdocument.getElementsByNameください。

サンプルコード:

var nameArray = document.getElementsByName("elementName");

for(var i=0; i<nameArray.length; i++){
nameArray[i].className = "myClass";
}
于 2012-10-18T20:03:33.047 に答える
0

ID はページ全体で一意である必要があります。

ページ要素間で同じ名前を使用したい場合は、代わりにクラスを使用してください。

于 2012-10-18T20:03:49.830 に答える
0 
document.getElementById()

DOM 要素を 1 つだけ選択するためのものです。ID は一意である必要があります。要素をグループ化する場合は、クラス名を指定する必要があります。

<button class="button_1"> ...
<button class="button_2"> ...
<button class="button_3"> ...

<button class="button_1"> ...
<button class="button_2"> ...
...

次のコマンドを使用して、最初のボタンをすべて選択します。

document.getElementByClassName('button_1')

次の方法ですべてのボタンを選択できます。

document.getElementsByTagName('button')

CSS で:

/* first buttons */
.button_1 { }

/* all buttons */
button {}

あなたのコード:

var btns = document.getElementsByClassName("button_1");
for(var i = 0; i < btns.length(); i++){
    var prev_name = btns[i].className;
    btns[i].className = prev_name + " buttonActive";
}
于 2012-10-18T20:09:28.373 に答える