[jQuery]click event 연습

원하는 크기의 element를 생상 후,
element를 클릭할 때마다 가로, 세로의 크기가 100px 증가, 각도가 15도씩 돌아가게 만들어 보았다.

script

        $(document).ready(function(){

            $('.box').css({
                width: 300,
                height: 300,
                backgroundColor: "lightgray",
                transition:"0.5s"
            });

            var boxW = $('.box').width();

        
            var angle = 0;

            $('.box').click(function(){

                angle += 15

                $('.box').css({
                    width: boxW += 100,
                    height: $('.box').height() + 100,
                    transform: `rotate(${angle}deg)`
                });

            });

        });

script 내부의 전체적인 코드로 하나씩 뜯어보자면,

            var boxW = $('.box').width();

=> element의 가로값을 계산하여 boxW라는 이름으로 정의해두고,

            var angle = 0;

=> angle이라는 변수에 0을 넣어준다.

            $('.box').click(function(){

                angle += 15

                $('.box').css({
                    width: boxW += 100,
                    height: $('.box').height() + 100,
                    transform: `rotate(${angle}deg)`
                });

            });

=> element를 클릭했을 때의 event를 주는 곳이다.
box라는 선택자를 클릭할 때마다 앞서 정의해둔 angle이라는 변수에 15씩 추가해주게 된다.
box의 width와 height에 값을 변경하여 가로, 세로값을 100씩 더해주고,
transform의 rotate를 사용하여 클릭시 15도씩 증가할 수 있도록 angle 변수를 넣어준다.
이 때, rotate는 deg라는 단위를 사용하기 때문에, 백틱(역따옴표)을 사용하여
rotate(${angle}deg)를 넣어준다.

box를 클릭할 때마다 backgroundColor와 borderRadius를 변경해줌

        $(document).ready(function(){

            var isActive = true;

            $('.box').css({
                width: 200,
                height: 200,
                backgroundColor: "skyblue"
            });

            $('.box').click(function(){
                
                if(isActive){
                    $('.box').css({
                        backgroundColor: "gold",
                        borderRadius: "50%"
                    });
                    isActive = false;
                } else if(!isActive){
                    $('.box').css({
                        backgroundColor: "skyblue",
                        borderRadius: "0%"
                    });
                    isActive = true;
                };

            })

        });

=> isActive가 참(true)이 기본인 경우를 두고,
클릭 이벤트 내부에 if문을 넣어주었다.
만약, 클릭 이벤트가 발생하는 시점에 isActive가 참인 경우
배경색을 gold, 둥글기를 50%로 바꿔주고
isActive 값을 flase로 바꿔준다.
클릭 이벤트가 발생하는 시점의 isActive가 거짓인 경우
다시 원래대로 되돌리기 위해서 배경색을 원래의 skyblue, 둥글기의 값을 0%로 바꿔주고
isActive의 값을 true로 바꿔준다.