jQuery 메모 (1)

Daniel Woo·2021년 12월 19일

jQuery 메모

목록 보기

1/1

jQuery 문제

여러개의 버튼이 있을 때 클릭한 버튼 하나만 색깔이 변경된 상태로 만들고, 나머지 버튼은 이미 색깔이 변경된 상태더라도 원래대로 되돌리려면 어떻게 해야할까?

  $("#userId .select-btn").click(function () {
  	$("#UserId .select-btn").not(this).removeClass("btn-clicked");
  	$(this).toggleClass("btn-clicked");
	});

DOM선택

우선 jQuery의 DOM선택 문법을 이용해 click이벤트가 발생할 시 class가 해당 태그에 부여되는 함수가 실행되도록한다.
jQuery에서 DOM에 접근하기 위해서는 css에서 html에 접근하는 방식과 동일한 방식으로 한다.

$('원하는DOM의선택자')

이 방식은 기존 바닐라 JS의 선택 방식인

document.querySelector('')
document.getElementById('')
document.getClassName('')

등 보다 훨씬 간단하고 효율적이게 접근할 수 있다.

not()

우선 접근한 DOM에서 클릭한 버튼 이외 버튼에 해당하는 DOM에 부여된 class를 빼주기 위해 jQuery의 not()문법을 사용한다.

$("#UserId .select-btn").not(this).removeClass("btn-clicked");

이 코드를 통해 해당 DOM 영역을 클릭했을 때 기존에 다른 버튼이 눌려있더라도 자연스럽게 꺼지게 된다. 이로써 버튼 중 한 가지 문항만 필요할 때 하나만 눌리고 다른 것은 꺼지게 되는 기능을 구현할 수 있다.

추가로, this의 경우 해당 DOM을 가리키는 문법으로 다시 DOM에 접근하는 번거로움을 줄인다.

toggleClass('')

toggleClass('원하는class이름')는 아주 유용한 문법이다. 기존에 addClass('')와 removeClass('') 및 if문을 이용하여 원하는 클래스를 부여하고 없애는 형식으로 버튼이 눌리는 기능을 구현할 수 있지만, toggleClass는 편리하고 코드도 더 깔끔하다.

$(this).toggleClass("btn-clicked");

jQuery의 toggleClass('')문법이 해당 DOM에 따옴표 안에 입력된 class를 인식하여 자동으로 생성하고, 없애기 때문이다.

Daniel Woo