on
웹퍼블리셔-입문]제이쿼리 each, data 사용법
웹퍼블리셔-입문]제이쿼리 each, data 사용법
반응형
오늘은 제이쿼리의 each와 data에 대해 알아보도록 하겠습니다.
1. "each"이란?
- 제이쿼리의 객체 수만큼 반복하는 함수
- 자바스크립트의 for문과 유사
- 선택자에게 속성을 순서대로 지정
$('선택자').each(function(){ });
2. "data-XX"는?
- 내가 원하는 값을 태그에 저장
- 제이쿼리의 내장된 속성과 구분이 되지 않으면 혼란을 줄 수 있어서 주의!!
- HTML5에서 새로 나온 속성
- 새로운 선택자 잡는 법
예제를 한번 풀어볼까요??
웹브라우저에 이런 구조를 만들어주고 번호를 클릭했을때 배경색이 바뀌도록 만들어보겠습니다.
먼저 기본구조부터 만들어야 하겠죠??
이제 body 구조를 짜보도록 하겠습니다.
간편하게 ul로 box를 만들어주고 li로 숫자를 감싸줍니다. 이제 style 시트로 올라가서 꾸며줍니다.
웹브라우저를 확인해보면,, 이러한 결과를 볼 수 있습니다.
이제 클릭했을 때 li의 배경색상이 바뀌게 script로 가줍니다.
$(document).ready(function(){
$('#box>li').each(function(index){
$(this).attr('data-a',index);
});
=>attr()로 태그에 속성을 추가한다.
=>data-XX는?
- 태그의 속성
- index 순서값을 지정
});
이렇게 지정했을 때 웹브라우저에서 검색창을 눌러보면 에 data-a로 순서값이 정해진 것을 볼 수가 있습니다.
이제 클릭했을 때, 의 배경색상이 바뀌도록 이벤트를 짜면 됩니다.
$(document).ready(function(){
$('#box>li').each(function(index){
$(this).attr('data-a',index);
}).click(function(){
var i = $(this).attr('data-a);
=> #box안쪽의 li에게서 지정한 data-a 값을 가져온다.
=> 내가 클릭한 요소의 순서값을 변수에 저장
$('#box>li').eq(i).addClass('active');
=> 추가된 active라는 이름의 Class를 #box안쪽의 li에게 순서대로 값을 준다.
=> addClass는?
- style시트에서 작성된 active(내가 원하는 클래스명)라는 클래스를 li에게 추가해준다는 뜻
});
});
이렇게 작성하면 됩니다.
여기서 active라는 이름으로 작성한 이벤트는 style시트에 올라가서 작성하면 됩니다.
--------------
.active{
background-color: lightseagreen;
}
웹브라우저에서 확인해볼까요??
자, 클릭했을 때 li의 배경 색상이 바뀌는 것을 볼 수 있네요. 완성입니다!
반응형
from http://exit40.tistory.com/186 by ccl(A) rewrite - 2021-10-01 21:27:42