Question

为了更好地了解我在做什么，请查看我以前的代码，我尝试做得更好＆gt;＆gt; Codepen

我希望有一个数组，我填充了我尝试设置动画的所有id's，并使用一个函数在每个.open上切换类.closed id在阵列中。

所以在点击时将.open添加到#Hamburger, #Navigation, #Black-filter。并在一秒钟内点击删除.open并为.closed添加id's。

因为我还在学习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>

Answer 1

有一些事情需要改进。

首先，你将变量命名为差。这实际上已经是你的一个问题，首先你要说

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

然后再

var b = "closed";

所以这需要修复，使用描述性的变量名称，这样你就会知道你在谈论什么。

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

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;

Answer 2

您正在寻找的是：

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

Answer 3

首先，你不需要打开＆＃34;和＆＃34;关闭＆＃34;类，只有一个会明显简化你的代码（并且有＃34;默认＆＃34;状态）。

然后，为所有按钮添加一个类，可以在JS和CSS中轻松操作它们（这里是类＆＃34; .btn＆＃34;）;

// 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>

Answer 4

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

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

如何在vanilla javascript中的数组上切换类“open”，“closed”

4 个答案: