(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기

프로그램 소개: http://simulz.com/462


프리셋으로 선택하기

미리 설정된 CCTV들을 자동으로 선택한다.

$('#left_foot button').click(function(){ $('#list :checkbox').attr('checked',false).parent().removeClass('checked'); $.each(cctv_preset(this.id), function() { $('#c' + this).attr('checked',true).parent().addClass('checked'); }); toggleResetButton(); });


$('#left_foot button')
ID가 left_foot인 객체에 속해있는 하위 엘레멘트인 button 객체들을 가리킨다.

.click() 메서드로 클릭 이벤트가 발생하면 스크립트가 실행된다.

$('#list :checkbox').attr('checked',false).parent().removeClass('checked');
#list에 속해 있고, 체크박스 객체들을 모두 가리킨다.
.attr() 메서드로 checked 속성을 제거하고,
.parent() 메서드는 상위 객체인 DIV를 카리킨다.
그 다음 removeClass() 메서드로 checked 클래스를 제거한다.

$.each(cctv_preset(this.id), function(index) {});
.each() 메서드는 반복문으로 배열을 순회한다.

cctv_preset(this.id)는 CCTV 프리셋이 저장된 사용자 함수로 this.id(버튼의 ID값)을 넘겨주면 cctv 번호가 있는 배열을 리턴한다.

첫번째 인자는 배열이며 보통은 jQuery 객체로 아래 처럼 사용할 수 있다.
$('selector').each(function(index){});
index는 0부터 시작하는 번호이다. 위 소스에서는 index가 필요 없으므로 생략하였다.

$('#c' + this).attr('checked',true).parent().addClass('checked');
.each(function(){}); 내부에서는 배열의 값을 this로 얻을 수 있다.
배열의 값이 1이면
ID가 #c1인 객체(INPUT)를 가리킨다.
그 다음 .attr() 메서드로 checked 속성을 추가하고
.parent() 메서드로 상위 객체로 이동 후,
.addClass() 메서드로 checked 클래스를 추가한다.
직접 클릭했을 때와 같은 동작을 한다.