Question

我有一个包含2个类的div元素，我想根据另一个元素是否处于活动状态来切换第三个类。

其他元素的活跃＆＃39;上课正在工作，但我无法弄清楚如何切换课程＆＃39; class3＆＃39;在元素上 - 我收到错误

未捕获的TypeError：无法读取属性＆＃39;切换＆＃39;未定义的

但我不确定这个功能究竟是什么不正确。我还在学习，所以这可能很明显！

HTML：

<div class="class1 class2"></div>

JS：

document.getElementById("button").addEventListener("click", 
myFunction); 

function myFunction(){

if (document.getElementById("otherElement").classList.contains("active")){
 document.getElementsByClassName("class2").classList.toggle("class3");
}}

我也想在纯JS中这样做，即使jQuery可能更容易从头开始学习

Answer 1

getElementsByClassName返回一个HTMLCollection，一个数组，即使该类只有一个元素，添加[0]选择第一个，toggle class3 }

＆＃13;

document.getElementById("button").addEventListener("click", 
myFunction); 

function myFunction(){

if (document.getElementById("otherElement").classList.contains("active")){
 document.getElementsByClassName("class2")[0].classList.toggle("class3");
}}

＆＃13;

.class1{
  background: red;
}

.class2{
  background: blue;
}

.class3{
  background: green;
}

div{
  width: 100px;
  height: 50px;
}

＆＃13;

<div class="class1 class2">hello</div>
<div id="otherElement" class="active">
there
</div>
<button id="button">
click
</button>

＆＃13;

Answer 2

document.getElementsByClassName("class2")返回一个数组。您需要循环遍历它的每个索引。

＆＃13;

if (document.getElementById("otherElement").classList.contains("active")){
  const size = document.getElementsByClassName("post-text").length;
  
  if (size > 0) {
  	for (let i = 0; i < size; i++){
      document.getElementsByClassName("post-text")[i].classList.toggle("class3");
  	}
  }
  
}

＆＃13;

纯JS - 在通过getElementByClassName访问的元素上切换第三个类

2 个答案: