Skip to content

Instantly share code, notes, and snippets.

@lucifiel0121
Last active October 30, 2018 07:52
Show Gist options
  • Save lucifiel0121/2d2cff70bebf0147d2498953eb959dc8 to your computer and use it in GitHub Desktop.
Save lucifiel0121/2d2cff70bebf0147d2498953eb959dc8 to your computer and use it in GitHub Desktop.
原生 js api 寫 click事件
// 原生 js api 寫 click事件
// 取個變數,比較短
const btnChange = document.querySelectorAll('.btn-change-content');
// 如果直接取 document.querySelector ,取到第一個就會回傳,詳細看 MDN
// 如果直接用 querySelectorAll ,直接 '點' ( document.querySelectorAll. ) 會找不到可以用的方法(methods)
// 要取 .item() 指定才有方法可以用,所以把 item()寫進迴圈全部取進來。
for (let index = 0; index < btnChange.length; index++) {
//addEventListener事件監聽器 , 可以去找看看 click 和 onclick 有什麼不一樣
btnChange.item(index).addEventListener('click', function () {
// classList 直接有方法可以取用 不過 ie支援度 ... :(
btnChange.item(index).classList.toggle('btn-change-content_is-actived');
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment