如何切換類香草數組的JavaScript

-2

爲了更好地知道我在這裏做一下我以前的代碼，我儘量讓好一點>>「打開」，「關閉」 Codepen 如何切換類香草數組的JavaScript

我想要一個數組，我填滿了所有id's，我嘗試使用動畫並且使用一個函數在數組中的每個id上切換類.open.closed。

所以點擊添加.open到#Hamburger, #Navigation, #Black-filter。和一秒鐘點擊刪除.open並添加.closed那些id's。

因爲我仍然在學習JavaScript我希望它能夠在香草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>

來源

2016-01-18 Max

哦，我的上帝！請更改您的變量名稱。由於名稱，解密代碼非常多。 – Prashant

請提供一個最簡單的例子（你的CSS不相關）。同時顯示一些試圖自己解決這個問題的證據。 –

你甚至看過控制檯嗎？ – Siguza

你所尋找的是：

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

來源

2016-01-18 15:22:12 Prashant

在演示鏈接中的行爲我已經放置了你想要做的事情？ – Prashant

謝謝，正是我一直在尋找的！ – Max

-2

事件偵聽器獲取事件作爲第一個參數。用它來決定該怎麼做：

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

來源

2016-01-18 15:18:24 Gavriel

請解釋爲什麼-1！ – Gavriel

有需要改進的幾件事情。

首先，您將變量命名爲較差。這實際上已經是你的一個問題，首先你說

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;

來源

2016-01-18 15:36:56

首先OU不需要「打開」和「關閉」類，只有一個將明顯簡化代碼（並且存在「默認」狀態）。然後，爲所有按鈕添加一個類，輕鬆地在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>

來源

2016-01-18 16:11:01 Cohars

你所說的話是正確的，並且爲了減少複雜性，只使用父項的切換狀態並讓css完成工作。但有一點不正確的是dat我只需要一個類。我需要兩個，因爲我要使用的關鍵幀，所以我不希望它在頁面加載時動畫。 – Max

如何切換類香草數組的JavaScript

回答

相關問題