如何在香草javascript中的数组上切换类“打开”、“关闭”答案

【问题标题】：How to toggle class "open", "closed" on an array in vanilla javascript如何在香草javascript中的数组上切换类“打开”、“关闭”
【发布时间】：2016-01-19 00:11:01
【问题描述】：

为了更好地了解我在做什么，请查看我以前的代码，我试图让它变得更好>>Codepen

我想要一个数组，用我尝试制作动画的所有id's 填充，并使用一个函数在数组中的每个id 上切换类.open .closed。

单击将.open 添加到#Hamburger, #Navigation, #Black-filter。然后单击一秒钟删除.open 并为id's 添加.closed。

因为我还在学习 javascript，所以我希望它在 vanilla javascript 中工作，所以在我继续使用 jquery 之前我了解了基础知识。

var hamburger = document.getElementById('Hamburger');
var navigation = document.getElementById('Navigation');
var blackFilter = document.getElementById('Black-filter');
var isOpen = true; // true or false

var animation = [h, s, b]; // #H #S #B
var open = "open"; // .open
var closed = "closed"; // .closed



function trigger() {
  if (isOpen === true) {
    animation.classList.add(open); // add .open to all id's
    animation.classList.remove(closed); // remove .closed from all id's
  } else {
    animation.classList.add(closed);
    animation.classList.remove(open);
  }
  isOpen = !isOpen; // toggles true to false
}

hamburger.addEventListener('click', trigger, false); // onclick toggle class
blackFilter.addEventListener('click', trigger, false); // onclick toggle class

body {
  width: 100%;
}
#Hamburger {
  height: 100px;
  background: red;
  width: 100px;
}
#Hamburger.open {
  opacity: 0.5;
}
#Hamburger.closed {
  opacity: 1;
}
#Navigation {
  height: 100px;
  background: blue;
  width: 100px;
}
#Navigation.open {
  opacity: 0.5;
}
#Navigation.closed {
  opacity: 1;
}
#Black-filter {
  height: 100px;
  background: green;
  width: 100px;
}
#Black-filter.open {
  opacity: 0.5;
}
#Black-filter.closed {
  opacity: 1;
}

<body>
  <div id="Hamburger"></div>
  <div id="Navigation"></div>
  <div id="Black-filter"></div>
</body>

【问题讨论】：

天哪！请更改您的变量名称。由于名称的原因，需要做很多额外的工作来解密您的代码。
请提供一个最小的例子（你的 css 不相关）。同时展示一些试图自己解决这个问题的证据。
你看过控制台吗？
您知道在顶部您设置了两次var open - 一次作为布尔变量，然后第二次作为字符串变量？（补充：纠正做得很好）。
@Rounin 感谢我编辑帖子时没有注意到

标签： javascript html css arrays

【解决方案1】：

你要找的是：

var isOpen = true;

var hamburger = document.getElementById('Hamburger');
var navigation = document.getElementById('Navigation');
var blackFilter = document.getElementById('Black-filter');


var animatable = [hamburger, navigation, blackFilter];
var openClass = "open"; // .open
var closedClass = "closed"; // .closed



function trigger() {
    if (isOpen) {
        animatable.forEach(function (element) {
            element.classList.add(openClass);
            element.classList.remove(closedClass);
        });
    } else {
        animatable.forEach(function (element) {
            element.classList.add(closedClass);
            element.classList.remove(openClass);
        });
    }
    isOpen = !isOpen;
}

hamburger.addEventListener('click', trigger, false); 
blackFilter.addEventListener('click', trigger, false);

Demo

【讨论】：

演示链接中的行为是我放置的你想要的吗？

【解决方案2】：

有一些事情需要改进。

首先，您对变量的命名相当糟糕。这实际上已经是你的问题之一，首先你说

var b = document.getElementById('B');

后来

var b = "closed";

所以这个问题需要解决，使用描述性的变量名，这样你就会知道你在什么时候谈论什么。

最后但并非最不重要的一点是，您正在尝试更改该数组 a 的元素，而不是数组本身。所以你需要自己访问元素，设置它们的类，然后你就可以了，例如：

for( var index in a ) {
    if ( open === true ) {
        a[index].classList.add(b);
        a[index].classList.remove(c);
    } else {
        a[index].classList.add(c);
        a[index].classList.remove(b);
    }
    open = !open;

【讨论】：

【解决方案3】：

首先，您不需要“打开”和“关闭”类，只有一个可以明显简化您的代码（并且存在“默认”状态）。

然后，为所有按钮添加一个类，以便在 JS 和 CSS 中轻松操作它们（这里是类“.btn”）；

// Directly get on array (a NodeList more precisely)
var buttons = document.getElementsByClassName('btn');

function toggleClass() {
  // Loop to add or remove (toggle) the the '.open' class 
  for (var i=0; i<buttons.length; i++) {
    buttons[i].classList.toggle('open');
  }
}

// Loop to add event listener to all buttons
for (var i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', toggleClass, false);
}

.btn {
  height: 100px;
  width: 100px;
}
.btn.open {
  opacity: 0.5;
}

#Hamburger { background: red; }
#Navigation { background: blue; }
#Black-filter { background: green; }

<div id="Hamburger" class="btn"></div>
<div id="Navigation" class="btn"></div>
<div id="Black-filter" class="btn"></div>

这已经很简单了。但是你应该有一个父元素保持打开/关闭状态，所以你不会在数组中循环。

// Only need to manipulate one DOM node
var menu = document.getElementById('menu');

function toggleClass() {
  menu.classList.toggle('open');
}

menu.addEventListener('click', toggleClass, false);

body {
  width: 100%;
}
.btn {
  height: 100px;
  width: 100px;
}
.menu.open > .btn {
  opacity: 0.5;
}
#Hamburger { background: red; }
#Navigation { background: blue; }
#Black-filter { background: green; }

<div class="menu" id="menu">
  <div id="Hamburger" class="btn"></div>
  <div id="Navigation" class="btn"></div>
  <div id="Black-filter" class="btn"
</div>

【讨论】：

你说的是正确的，为了让它不那么复杂，只使用父级的切换状态并让 css 完成工作。但不正确的一件事是我只需要一堂课。我需要两个因为我要使用的关键帧，所以我不希望它在页面加载时动画。

【解决方案4】：

您的事件侦听器将事件作为第一个参数。用它来决定做什么：

function trigger(event) {// use event.target ... }

【讨论】：

请解释为什么是-1！