Question

我编写此代码是为了更改表示每日计划表中小时数的 div 的背景。第一个实例 (onclick) 有效，但其他实例无效。我需要给每个 .container 自己的 id 和自己的功能吗？

var changeStatus = document.querySelector("#changeStatus");
var container = document.querySelector(".container");

changeStatus.addEventListener("click", function () {
  container.setAttribute("class", "filled");
}

Answer 1

querySelector() 旨在仅返回单个元素。如果有多个元素匹配 .container 选择器，那么它只会返回第一个。

在您的情况下，您需要使用 querySelectorAll() 来检索所有相关元素，然后您需要遍历它们以更新 class。

var changeStatus = document.querySelector("#changeStatus");
var container = document.querySelectorAll(".container");

changeStatus.addEventListener("click", function () {
  container.forEach(el => el.setAttribute("class", "filled"));
});

Answer 2

您可以使用循环添加点击侦听器，如下所示：

changeStatus.addEventListener("click", function () {
    for(var i=0; i<container.length; i++) {
        container[0].setAttribute("class", "filled");
    }
  
}

Answer 3

这是上面@pilchard 回答的 querySelectorAll 示例：

var changeStatus = document.querySelector("#changeStatus");
var containers = document.querySelectorAll(".container");

changeStatus.addEventListener("click", function () {
  containers.forEach(function (container) {
    container.setAttribute("class", "filled");
  });
});

.filled {
  color: #f00;
}

<button id="changeStatus">change status</button>
<div class="container">container 1</div>
<div class="container">container 2</div>
<div class="container">container 3</div>

使用 click 和 querySelector 更改属性未完全正常运行

3 个答案: