Question

我有两个班级相同的divs。

<div class="html-code"></div>
<div class="html-code"></div>

我在该类中添加了JavaScript。我像这样变了。

var html = document.getElementsByClassName("html-code")[0];

很奇怪，我在变量html上运行的JavaScript仅适用于第一个div，而不适用于第二个div。可能是什么问题呢？预先感谢。

Answer 1

从末尾删除索引[0]以选择所有div。

var html = document.getElementsByClassName("html-code");

或使用这样的循环：

var html = document.getElementsByClassName("html-code");

for (i in html) {
  html[i].innerHTML = "div " + i;
}

<div class="html-code"></div>
<div class="html-code"></div>

Answer 2

您可以尝试这种方式：

var html = document.getElementsByClassName("html-code");

Array.prototype.forEach.call(html, function(el) {
  el.style.backgroundColor = "green";
});

.html-code {
  width: 100px;
  height: 100px;
  margin-bottom: 2px;
  border: 1px solid #ccc;
}

<div class="html-code"></div>
<div class="html-code"></div>

Answer 3

在执行此操作时要回答您的问题：

document.getElementsByClassName("html-code");

响应是一个类似数组的对象，名为HTMLCollection，然后

document.getElementsByClassName("html-code")[0]//<-- first element

document.getElementsByClassName("html-code")[1]//<-- second element

因为在这种情况下，类html-code有两个匹配项。

要遍历元素，您不能使用像.map()或filter()这样的数组方法，应该使用用于对象的方法：

for(var element in object) {//code}

或通用：

for(let i; i<object.length;i++){//code}

和使用Object constructor的方法，例如：

var keys = Object.keys(object);

Answer 4

谢谢您的帮助。

我终于通过添加两个变量和两个函数解决了这个问题。

var html = document.getElementsByClassName("html- 
code")[0];

html.onclick = function() {
// My JavaScript function
}

var html = document.getElementsByClassName("html- 
code")[1];

html.onclick = function() {
// Same function as above
}

这对我有用。我了解到，如果有两个具有相同类的div，则必须添加两个函数。

JavaScript仅适用于一个div

4 个答案: