Question

我对js比较新。试图避免这个项目的jQuery。我的目标是添加一个活跃的＆＃34;单击按钮时将类添加到目标元素，同时从其任何兄弟中删除活动类。我遇到的一个问题是涉及document.getElementByClassName（）的问题，它声称不是一个函数。

// HTML

<path id="el1" class="btn" onclick="revealPanel()">
<path id="el2" class="btn" onclick="revealPanel()">

<g id="el1_box" class="box"></g>
<g id="el2_box" class="box"></g>

// JS

function revealBox() {

  document.getElementsByClassName("box").classList.remove("active");

  var myId = event.target.id;
  var boxNum = myId + "_box";

  document.getElementById(boxNum).classList.add("active"); 
}

Answer 1

.getElementsByClassName()不返回单个元素，也没有.classList属性。

您可以迭代.getElementsByClassName()的结果，并为.classList的每个元素设置HTMLCollection。

Answer 2

这里的更新似乎正在发挥作用，或者至少朝着正确的方向发展：

function revealBox() {

  var boxSiblings = document.getElementsByClassName("active");
  while (boxSiblings.length)
  boxSiblings[0].classList.remove("active");

  var myId = event.target.id;
  var boxNum = myId + "_box";

 document.getElementById(boxNum).classList.add("active"); 
}

如何使用纯javaScript从兄弟姐妹中删除类？

2 个答案: