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

Question

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

另一个元素的 'active' class 正在工作，但我不知道如何在元素上切换 'class3' - 我收到错误

Uncaught TypeError: Cannot read property 'toggle' of undefined

但我不确定这个函数到底哪里不正确。我还在学习，所以这可能很明显！

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 return 一个 HTMLCollection，一个数组，即使只有一个元素包含 class，将 [0] 添加到 select 第一个，然后toggle class3

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

function myFunction(){

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

.class1{
  background: red;
}

.class2{
  background: blue;
}

.class3{
  background: green;
}

div{
  width: 100px;
  height: 50px;
}

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

Answer 2

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

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

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

Pure JS - Toggling a third class on an element accessed via getElementByClassName

html

javascript

class

function

toggle