Question

我正在尝试使用click eventlistener制作一个简单的动画，但我想创建它来获取类而不是id。我希望每当有人点击按钮打开盒子，再次点击它关闭它。我已经尝试了它与ID和它的工作，但当我只使用它没有。有什么问题？

感谢。 HTML代码：

<div class = "box"></div>
<button class = "btn">Click</button>

css代码：

body {
  background:grey;
}

.box{
  width:0px;
  height:0px;
  background:orange;
}

.box.active {
  width:300px;
  height:300px;
  background:orange;
}

javascript代码：

var btn = document.getElementsByClassName("btn");
btn.addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");

    if ( y.className === "active" ){
      y.className = "";
    }else{
      y.className = "active";
    }
}

Answer 1

document.getElementsByClassName()返回htmlCollection，其中没有方法addEventListener。如果您只有一个元素，请考虑为其提供id并使用相同的代码，但将document.getElementsByClassName()的所有出现更改为document.getElementById()，或使用

document.getElementsByClassName()[0].addEventListener(...)

如果你想要添加一个事件的多个元素，你需要循环它们。

ID示例：

<div id="box"></div>
<button id="btn">Click</button>

JS：

var btn = document.getElementById("btn");
btn.addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementById("box");

    if ( y.className === "active" ){
      y.className = "";
    }else{
      y.className = "active";
    }
}

如果您想将它与课程一起使用，有几点需要考虑。如上所述，您需要选择一个元素或循环遍历所有以分配事件侦听器或更改其类。此外，如果您的代码正常工作，如果它没有active类，那么它只会覆盖整个类。以下将适合您：

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box")[0];

    if ( y.classList.contains("active") ){
      y.classList.remove("active");
    }else{
      y.classList.add("active");
    }
}

或者更容易：

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box")[0];
  y.classList.toggle('acitve');
}

Answer 2

有一些问题。

document.getElementsByClassName返回一个数组，因此您必须访问该数组才能添加事件侦听器。类似于：btn[0].addEventListener
再次在openFunction（）上，您必须通过getElementsByClassName访问返回的数组。
如果className处于活动状态，则从对象中删除所有类，包括框类。因此，当您再次单击时，它将找不到该元素。

在这里查看一个关于vanilla JS的演示：

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");

    if ( y[0].className === "box active" ){
      y[0].className = "box";
    }else{
      y[0].className = "box active";
    }
}

body {
  background:grey;
}

.box{
  width:0px;
  height:0px;
  background:orange;
}

.box.active {
  width:300px;
  height:300px;
  background:orange;
}

<div class = "box"></div>
<button class = "btn">Click</button>

如果您想使用Jquery，可以尝试使用toggleClass。

toggleClass：当类不存在时，这相当于addClass，当类存在时，它等同于removeClass。

Answer 3

考虑以下因素，更有效/更清洁：

var btn = document.getElementsByClassName('btn');
var active = false;
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");
  active = !active;
  y[0].className = active ? 'box' : 'box active';
}

Codepen

链接以防万一有人想知道三元运算符的工作原理：

Conditional (ternary) Operator

condition ? expr1 : expr2

道格拉斯·克罗克福德也读得很好：

Code Conventions for the JavaScript Programming Language

此外，这是JsPerf中的性能测试。

Javascript单击Listener getting Classes

3 个答案: