바닐라 +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
