同じクラスの2つのインスタンスをトリガーする - Javascript

Question

私は2つのハンバーガーメニューがあるメニューシステムを持っています。私はどのようにこれらのメニューアイコンの両方のインスタンスをトリガするJSをするように努めています。彼らは両方ともすべて同じクラスを持っています。

forループを追加しようとしましたが、クラスのインスタンスで何かをループしましたが、これはうまくいかないように見えました。今、無限の円で回っています。

以下のコードでは、最初のハンバーガーの男性の3つのメニューバーのインデックス番号をゼロ[0]にして、トップハンバーガーメニューをクリックしたときに何が起こるかを確認できます。

いずれかのハンバーガーメニューをクリックすると、バーのアニメーションが両方のアイコンで発生し、青いボックスの状態が変化するようにしたいと思います。

何か助けが素晴らしいだろう。

Codepenリンクはこちらです：https://codepen.io/emilychews/pen/jwwVam

コードは以下の通りです。

JAVASCRIPT

var container = document.getElementsByClassName('container')[0], 
    bar1 = document.getElementsByClassName('bar1')[0], 
    bar2 = document.getElementsByClassName('bar2')[0], 
    bar3 = document.getElementsByClassName('bar3')[0], 
    box = document.getElementsByClassName('box')[0], 
    openMenu = false; // used for toggle 

container.onclick = function(){ 

    if(openMenu === false) { 

    bar1.classList.add("bar1_open"); 
    bar2.classList.add("bar2_open"); 
    bar3.classList.add("bar3_open"); 

    box.classList.add("changeBackground"); 

    openMenu = true; 

    } else { 

    bar1.classList.remove("bar1_open"); 
    bar2.classList.remove("bar2_open"); 
    bar3.classList.remove("bar3_open"); 

    box.classList.remove("changeBackground"); 

    openMenu = false; 
    } 

}; 

CSS

* {padding: 0; margin: 0;} 
body {height: 200vh; font-family: arial;} 
/* red square */ 
.container { 
    margin: 10px; 
    width: 100px; 
    height: 100px; 
    background: red; 
    padding: 0px; 
    position: relative; 
} 

/* properties for all menu bar lines */ 
.bar { 
    position: absolute; 
    height: 4px; 
    width: 60px; 
    background: blue; 
    left: 20px; 
} 

/* 1st menu line */ 
.bar1 { 
    position: absolute; 
    top: 28px; 
    margin: 0 auto; 
    transform-origin: top right; 
    transition: transform .5s; 
} 

/* 2nd menu line */ 
.bar2 { 
    position: absolute; 
    top: 48px; 
    margin: 0 auto; 
    transition: opacity 1s; 
} 

/* 3rd menu line */ 
.bar3 { 
    position: absolute; 
    top: 68px; 
    margin: 0 auto; 
    transform-origin: right bottom; 
    transition: transform .5s; 
} 

.bar1_open{ 
    transform-origin: top right; 
    transform: rotate(-45deg) translate(-7px, -7px); 
    transition: transform .5s .1s ease-out ; 
} 

.bar2_open { 
    opacity: 0; 
    transition: opacity .2s ease-in; 
} 

.bar3_open { 
    top: 69px; 
    transform-origin: right bottom; 
    transform: rotate(45deg) translate(-7px, 7px); 
    transition: transform .5s .1s ease-out; 
} 

.box { 
    padding: 10px; 
    width: 200px; 
    height: 100px; 
    background: blue; 
    position: absolute; 
    left: 300px; 
    top: 30px; 
    z-index: 99; 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center 

} 

.changeBackground { 
    background: red; 
} 

HTML

<div class="container"> 
    <div class="bar bar1"></div> 
    <div class="bar bar2"></div> 
    <div class="bar bar3"></div> 
</div> 

<!-- second hamburger menu button that currently has no JS --> 
<div class="container"> 
    <div class="bar bar1"></div> 
    <div class="bar bar2"></div> 
    <div class="bar bar3"></div> 
</div> 

<div class="box"> This toggles after 1st hamburger menu is clicked</div> 

Answer 1

、私はDOM要素の配列の代わりに、単一のものにし、それらをループのための変数を設定します。 編集：HERESに更新され、あなたが見てhttps://codepen.io/anon/pen/LLBEeQ

var container = document.getElementsByClassName('container'), 
    bar1 = document.getElementsByClassName('bar1'), 
    bar2 = document.getElementsByClassName('bar2'), 
    bar3 = document.getElementsByClassName('bar3'), 
    box = document.getElementsByClassName('box')[0], 
    openMenu = false; // used for toggle 

for(var i=0; i < container.length; i++){ 
container[i].onclick = function(){ 

    if(openMenu === false) { 
    for(var j = 0;j<bar1.length;j++){ 
    bar1[j].classList.add("bar1_open"); 
    bar2[j].classList.add("bar2_open"); 
    bar3[j].classList.add("bar3_open"); 
    } 
    box.classList.add("changeBackground"); 

    openMenu = true; 

    } else { 
    for(var j = 0;j<bar1.length;j++){ 
    bar1[j].classList.remove("bar1_open"); 
    bar2[j].classList.remove("bar2_open"); 
    bar3[j].classList.remove("bar3_open"); 
    } 
    box.classList.remove("changeBackground"); 

    openMenu = false; 
    } 

} 
}; 

Answer 2

あなたは、これは完璧な作品はJQueryを使用して[OK]をしている場合：

HTML（jQueryのへのリンク）：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

はjavascript：

私はあなたがそれをしたいどのように動作するようにコードを洗練している

var container = document.getElementsByClassName('container')[0]; 

console.log(container); 
var bar1 = document.getElementsByClassName('bar1')[0], 
    bar2 = document.getElementsByClassName('bar2')[0], 
    bar3 = document.getElementsByClassName('bar3')[0], 
    box = document.getElementsByClassName('box')[0], 
    openMenu = false; // used for toggle 

    $(".container").click(function(){ 

    if(openMenu === false) { 

    $(".bar1").addClass("bar1_open"); 
    $(".bar2").addClass("bar2_open"); 
    $(".bar3").addClass("bar3_open"); 

    box.classList.add("changeBackground"); 

    openMenu = true; 

    } else { 

    $(".bar1").removeClass("bar1_open"); 
    $(".bar2").removeClass("bar2_open"); 
    $(".bar3").removeClass("bar3_open"); 

    box.classList.remove("changeBackground"); 

    openMenu = false; 
    } 

});