바닐라 +font awesome
방법1) -1을 * 해서 토글 로직 짜기
<!DOCTYPE html> <html> <head> <title>Font Awesome 5 Icons</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> .my-cursor { cursor: pointer; } .my-love { color: red; } </style> </head> <body> <i onclick="loveToggle(event)" class="fas fa-heart my-cursor"></i> <script> let check = -1; function loveToggle(e) { console.log(e.target); if (check == -1) { $(e.target).addClass("my-love"); } else { $(e.target).removeClass("my-love"); } check = check * -1; //-1에 -1을 곱하면 1과 -1을 왔다갔다.. 이 토글 알고리즘 기억! } </script> </body> </html>
방법2) boolean 값으로 토글 로직 짜기
<!DOCTYPE html> <html> <head> <title>Font Awesome 5 Icons</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> .my-cursor { cursor: pointer; } .my-love { color: red; } </style> </head> <body> <i onclick="loveToggle(event)" class="fas fa-heart my-cursor"></i> <script> let isLike = false; function loveToggle(e) { console.log(e.target); if (isLike == true) { $(e.target).removeClass("my-love"); } else { $(e.target).addClass("my-love"); } isLike = !isLike; } </script> </body> </html>
[ 화면에서 확인 ]
클릭하니 색이 변함. 검빨검빨검빨검빨
font awesome 사용하자!!! w3school에 가면 Icons Health 라고 있음. https://www.w3schools.com/icons/fontawesome5_icons_health.asp
폰트 어썸 적용하는 법
jQuery 적용 (onClick ver)
jQuery는 저런 로직이 필요 없다!
<!DOCTYPE html> <html> <head> <title>Font Awesome 5 Icons</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> .my-cursor { cursor: pointer; } .my-love { color: red; } </style> </head> <body> <i onclick="loveToggle(event)" class="fas fa-heart my-cursor"></i> <script> function loveToggle(e) { console.log(e.target); $(e.target).toggleClass("my-love"); } </script> </body> </html>
css 속성을 주는게 아니라 클래스에 my love를 넣었다 뺐다 하는 것
onClick 안 걸고 id 걸자
<!DOCTYPE html> <html> <head> <title>Font Awesome 5 Icons</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> .my-cursor { cursor: pointer; } .my-love { color: red; } </style> </head> <body> <i id="love-1" class="fas fa-heart my-cursor"></i> <script> $("#love-1").click((e) => { console.log(e); $("love-1").toggleClass("my-love"); }); </script> </body> </html>
이벤트 안에는
이렇게 수많은 상태와 행위가 들어온다. 이 중에서 target = DOM 찾기?? 하여튼 target은 꼭 기억하라.
Share article