-1

我有一个在三个容器中有三个按钮的页面。每个容器中的第一个按钮相同id，每个容器中的第二个按钮相同，每个容器中id的第三个按钮相同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 元素getElementById。如果你想选择多个元素，你应该使用 class 而不是 id。

您不应该对同一文档中的两个以上元素使用相同的 id。

注意：我将所有按钮的 id 替换为 class 你也应该申请 span。

修改后的代码：

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()”时，仅返回第一个对象。

而是将“名称”属性与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 元素。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 回答