-
[JS/클로져] 자바스크립트, 클로저를 이용한 버튼 클릭 시 나타나는 툴팁Frontend 2019. 6. 12. 15:21
클로저에 대해서 이해하려고 간단한 툴팁 만들기 연습을 해보았다.
물론 클로저를 이용하지 않아도 그냥 클래스를 조작해서 만들 수 있지만
나는 클로저 이해하는게 목적이니까 굳이 굳이 클로저를 활용하여 만들기ㅋㅋ
초간단 버튼 툴팁! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Toggle practice</title> <style> .btn-tgl { width: 110px; height: 40px; background: #333; color: #fdf5d3; border: none; font-size: 20px; } .txt { display: none; position: relative; width: 300px; padding: 10px; background: #fdf5d3; text-align: center; -webkit-box-shadow: 0 10px 21px -2px rgba(50,51,42,0.2); box-shadow: 0 10px 21px -2px rgba(50,51,42,0.2); } .txt.show { display: block; } .txt:after { content: ''; position: absolute; top: -10px; left: 43px; display: block; width: 20px; height: 20px; background: #fdf5d3; transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> </head> <body> <button type="button" class="btn-tgl">Toggle</button> <p class="txt"> hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </body> </html>html과 css를 먼저 만든다.
버튼이랑 툴팁은 대충 만들면 되는데 괜히 하다보면 꾸미고 싶어짐.ㅋㅋ
만약에 툴팁이 나타날 때 애니메이션 효과를 주고 싶다면
css로 opacity를 조절하거나 하면 된다. 지금은 그게 목적이 아니므로 패스.
let toggleInit = (function () { let status = true; return function () { if (status) { document.querySelector('.txt').classList.add('show'); } else { document.querySelector('.txt').classList.remove('show'); } status = !status; } })(); document.querySelector('.btn-tgl').addEventListener('click', toggleInit);status라는 변수에 true를 기본값으로 설정한다.
그리고 클릭할 때마다 status의 값을 false - true - false - true 이렇게 번갈아 바꿔주면서 토글시킬 예정이다.
즉시실행함수를 만들고 status 변수의 값을 바꿔주는 함수를 return시킨다.
그럼 이제 버튼을 클릭할 때마다 toggleInit은 자바스크립트 클로저에 의해 바뀐 status 값을 기억하고 있다.
그러면 버튼을 클릭할 때마다 status값이 true - false - true - false로 바뀌므로
툴팁이 보였다가 안보였다가를 반복하게 된다.
반응형'Frontend' 카테고리의 다른 글
[JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model) 조작하기(2) - DOM Manipulation (734) 2019.06.16 [JS/DOM] 자바스크립트, 돔 조작 시 주의할 점 (Live Collection vs Static Collection) (2041) 2019.06.16 [JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model) 탐색하기(1) - DOM Traversing (967) 2019.06.10 [JS/클로져] 자바스크립트의 Lexical scoping과 Closure (2) (1808) 2019.06.10 [JS/Array] slice()와 splice()의 차이점 (2045) 2019.06.07 COMMENT