1. 토글로 하기
- id를 안주면 id를 못찾는데 어떻게 바꿀 수 있을까?
e.타겟을 찾아서 하면 됨
- 이벤트를 찾아서 타겟을 받으면 DOM을 찾을 수 있음
<!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; } </script> </body> </html>
2. boolean으로 하기
- isLike : 전역변수
- isLike를 역치만 해주면 됨
<!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).addClass("my-love"); } else { $(e.target).removeClass("my-love"); } isLike = !isLike; } </script> </body> </html>
3. 클래스를 넣다 뺏다 하기 / 이게 제일 좋음
<!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); $(e.target).toggleClass("my-love"); } </script> </body> </html>
- 클라이언트 사이드 랜더링 할 때 사용
무조건 사용하는 것은 아님
ex) 검색을 하다 좋아요를 누르면 검색 글자가 남아있음
ex) 휴대폰 인증하기
- 클릭해서 서버쪽으로 인서트하고 색깔이 있는 전체 페이지를 다운 받아도 됨
ex) 검색하다 좋아요를 누르면 검색 글자가 없어짐
4. 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(() => { $("#love-1").toggleClass("my-love"); }); </script> </body> </html>
Share article
