반응형
■ [jQuery] 순차적 선택
회사에있는 코드를 분석하다가 아래 예제 소스와 같이 jQuery의 .class, id, name 을 나열하는 형태로 셀렉터를 지정하는 방법이 있었다. 태그값에 무언가 임의의 값을 지정함으로서 값을 찾을 수 있다는 것이 나름 신선했고, 동일한 div 내에서 유동적으로 값을 변경할 수 있는것이 장점으로 보이기에. 한번 정리를 해 보았다.
| relation.php |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>이미지 변경</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/JavaScript"> function changeButtonImage(obj) { changeTeacherImage('#social_network #sns_icon[sns="' + obj + '"]'); } function changeTeacherImage(obj) { image = "/images/" + jQuery(obj).attr('sns') + ".png"; alert(image); jQuery('#social_network #sns_icon[sns="'+ jQuery(obj).attr('sns') +'"] #sns_image').attr("src", image); } </script> </head> <body> <div> <a href = "javascript:" onClick = "changeButtonImage('facebook')"> <img src="/images/s_facebook.png"> </a> <a href = "javascript:" onClick = "changeButtonImage('google-plus')"> <img src="/images/s_google-plus.png"></a> <a href = "javascript:" onClick = "changeButtonImage('twitter')"> <img src="/images/s_twitter.png"> </a> <a href = "javascript:" onClick = "changeButtonImage('tumblr')"> <img src="/images/s_tumblr.png"> </a> <a href = "javascript:" onClick = "changeButtonImage('path')"> <img src="/images/s_path.png"> </a> </div> <div id = "social_network"> <div id = "sns_icon" sns = "facebook"> <img id = "sns_image" src = ""> </div> <div id = "sns_icon" sns = "google-plus"> <img id = "sns_image" src = ""> </div> <div id = "sns_icon" sns = "twitter"> <img id = "sns_image" src = ""> </div> <div id = "sns_icon" sns = "tumblr"> <img id = "sns_image" src = ""> </div> <div id = "sns_icon" sns = "path"> <img id = "sns_image" src = ""> </div> <div> </body> </html> |
| 출력결과(초기값) |
출력결과(상단 이미지 클릭시) |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 글자수 제한 기능 구현하기 (0) | 2015.07.30 |
|---|---|
| [jQuery] DIV로 레이어 팝업창 만들기 (0) | 2015.07.25 |
| [jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현 (0) | 2015.06.10 |
| [jQuery] append vs html 비교 (0) | 2015.05.22 |
| [jQuery] jQuery Ajax 부가 메서드 (0) | 2015.05.10 |
