Question

我有一个页面，在三个容器中有三个按钮。每个容器中的第一个按钮具有相同的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>

Answer 1

这种情况正在发生，因为document.getElementById返回了使用指定的id找到的第一个元素。

这是因为假定ID是唯一的。

考虑使用类名，并以这种方式选择它们：

document.getElementsByClassName( 'text' )

Answer 2

您只能使用getElementById选择一个dom元素。如果你想选择多个元素，你应该使用class而不是id。

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

注意：我为所有按钮替换了id，同样你也应该申请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>

Answer 3

在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";
}

Answer 4

整个页面上的ID应该是唯一的。

如果您希望在页面元素中使用相同的名称，请使用类。

Answer 5

document.getElementById()

仅用于选择一个DOMelement。 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";
}

CSS类未应用于所有类似元素

5 个答案: