[jQuery] 간결하게 on / off 이미지나 버튼 제어하기

[jQuery] 간결하게 on / off 이미지나 버튼 제어하기

제목그대로 간결하게 다량의 버튼이나 오브젝트의

상태를 변화시킬 때 사용하는것을 생각해 보았습니다.

jQuery를 알게 되고 나서 매번 감사한 것은,

document.getElementById() 같은 것으로 오브젝트로 찾지 않고,

CSS 셀렉터보다 향상된 셀렉터를 통해 제어한다는 것이지요.

이번에 그런 장점을 유감없이 발휘한 것 같다라고 생각되는 다소 조잡해보이는 동작을 통해 

평소보다 짧게 해결이 된 것 같아 글을 남겨봅니다.

개발자들의 든든한 지식창고 구글 하단의 페이징 표시기를 예를 들어보겠습니다.

1번을 선택하면 1번만 빨강색 영문자 O가 되고, 나머지는 노랑색 영문자 O가 됩니다.

이 이미지들은 사실 하나로 된 이미지에서 style만 변경되어 바뀌는 것이지만, 

어쨌든 바뀌는 건 바뀌는 것입니다.

하나와 다른 나머지가 모두 다르게 변경되는 상황이 발생하는 것 입니다.

위 처럼 하나와 나머지가 일괄적으로 변환되는 내용을 간결하게 

우선 제가 선택한 것이 공통의 속성을 가진 여러가지중의 어떤것인지 찾아보겠습니다.

여러 개의 이미지가 있다는 가정으로 진행하겠습니다.

//img 태그를 클릭시의 동작을 정의합니다.

$('img').click(function()

{

     console.log($('img').index(this));

});

이렇게 기술하면 클릭한 img가 여러 img중 몇번째 것인지 콘솔에 찍어줍니다. 이 몇번째라는 것은 0-base입니다.

그럼 이제 이 선택된 대상의 src 속성을 변경할 건데요, 여러 방법이 있습니다.

1. $(this).attr('src',사용자가 원하는 내용);

2. $('img:eq('+$('img').index(this)+')').attr('src', 사용자가 원하는 내용);

둘다 같은 동작인데요.

속도차이에 그다지 민감한편이 아니라.. 원하는대로 자연스레 사용했습니다.

이제 다른 요소들을 다룰 것인데요.

저의 경우 예전에는 반복문을 통해 요소들을 하나씩 돌도록 하여 검사를 해가면서 했지만, 

이제는 다르게 할 수 있다는 걸 알게 되었습니다.

for(var i = 0;i < $('img').size() ; i++)

{

    

}

이런식으로 진행했었습니다.

반복문을 돌다가 if문을 주면서 제어를 중간중간을 확인했었는데 이부분을 위로 올려서 진행했습니다.

$('img:not(:eq('+$('img').index(this) + '))') .each(

     function()

     {

     }

);

이것입니다. 해석해보면 'img 태그중 not안에 있는 것은 제외하고 선택하라' 입니다.

eq이는 img 태그중 인덱스 번호와 일치하는 것을 선택한다는 의미입니다.

결국 현재 클릭, 또는 어떤 이벤트를 일으킨 대상을 제외한 나머지를 선택하게 되는 것입니다.

그 선택된 대상들을 .each()를 통해 각각