jQuery 07
버튼을 눌러서 글자가 사라지게 하기. 또는 사라졌던 글자가 나타나게 하기.
removeClass(), addClass()를 사용한다
실행화면
ㅅ
visibility - 공간을 남겨두고 글자를 안보이게 한다
display - 공간까지 없어진다. 글자를 안 보이게 버튼 누를 때마다 글자 공간이 없어져 버튼까지 위로 올라간다
코드분석
$('#my-btn1, #my-btn2').click(function(e) {}); -> 콜백함수 function(e) 에서 'e'는 이벤크를 의미한다.
클릭하면서 이벤트를 매개변수로 보내준다.
this 키워드의 id 속성을 변수 btnId에 저장한다. if 조건문으로 객체의 id가 'my-btn1'인지 'my-btn2'인지 판단한다.
this 키워드 아래에 'console.log(this)'입력하고 버튼 1개씩 클릭했다.
실행화면
이것으로 각 버튼의 아이디를 this 키워드로 확인했다. 변수 btnId 에서 this 키워드의 id가 대입됐을 것이다.
my-btn1을 입력했다면 조건문으로 색깔을 빨강와 파랑으로 번갈아 변경한다.
jQuery객체명.hasClass('클래스명') -> true, false 중 1개를 반환한다. -> hasClass()가 클래스를 포함하고 있으면 true, 포함하지 않으면 false를 반환한다.
jQuery객체가 red를 포함하면 toggleClass('blue')로 blue 클래스를 적용한다.
반대로 red를 포함하지 않으면 toggleClass('red')로 red 클래스를 적용한다.
hasClass(), toggleClass() 대신 css로 글자색깔 속성, visibility 속성을 변경하기
