DOM 토글 (좋아요 버튼)

Feb 21, 2024

바닐라 +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은 꼭 기억하라.