jQuery 작성 순서에 따른 결과값 변화에 대한 질문이 있습니다

Question

안녕하세요 선생님! 너무 재밌게 강의 듣고 있는 1인입니다 :) 다름이 아니라 복습하던 중 jQuery 작성 순서에 따라서 결과값이 다르게 나오는 것에 대한 궁금증이 있습니다. < script > $ ( ".testimonial-pic img" ). click ( function () { $ ( this ). addClass ( "active" ); $ ( this ). siblings (). removeClass ( "active" ); $ ( ".testimonial .content" ). removeClass ( "active" ); $ ( "#" + $ ( this ). attr ( "data-alt" )). addClass ( "active" ); }); 수업에서 설명주셨던 jQuery 부분을 보면 .testimonial-pic의 img를 클릭했을 때 클릭된 this, 즉 img에 active라는 class를 주고 그와 동시에 siblings()로 형제들에겐 active 클래스를 삭제하라는 것은 잘 이해했습니다. 그리고 마찬가지로 #tab1~tab4에 addClass로 active를 주고 동시에 removeClass로 그 외의 요소에는 active 클래스를 삭제하라는 것은 알겠는데, $ ( "#" + $ ( this ). attr ( "data-alt" )). addClass ( "active" ); $ ( ".testimonial .content" ). removeClass ( "active" ); 왜 위와 같이 두개의 순서를 바꿔서 작성하게 되면 이미지를 클릭했을 때 p태그 안에 있는 내용이 모두 사라지게 되는 오류가 생기는지 잘 모르겠습니다. jQuery가 위에서부터 실행되는 것은 알고 있는데, 그걸 생각한다 하더라도 조금 이해가 안되는 것 같습니다..! 그리고, $ ( ".testimonial .content" ). removeClass ( "active" ); 여기에서는 .siblings()를 넣어줘도 안 넣어줘도 똑같은 결과값을 가지는 것 같은데, 왜 이 코드에서는 siblings()를 빼도 문제없이 작동하는 건가요~? 순서가 바뀐건 제가 혼자서 안보고 연습 작성하다가 일어난 오류이기 때문에 선생님 코드와 달라진 것은 없습니다만, 혹시 제가 작성한 전체 코드가 필요하실수도 있을 것 같아서 git주소 공유드립니다. https://github.com/Kyu-holic/tab-menu-content-jQuery.git 감사합니다~!!

코딩웍스(Coding Works) · Answer

앞으로 이 부분은 항상 만나게 되는 경우입니다. 모두 닫고 1개만 열기... 라고 생각하시면 됩니다. 브라우저는 html, css, js 파일 모두 위에서 아래도 읽습니다. 단 한 줄의 차이라도 먼저 나오고 나중에 나오고가 매우 중요합니다. ▼ 아래 코드는 모든 콘테츠를 안보이게 해라.. 입니다. $(".testimonial .content").removeClass("active"); ▼ 아래 코드는 누른 1개만 보이게 해라.. 입니다. $("#" + $(this).attr("data-alt")).addClass("active"); 곧, 위에처럼 정상 순서로 만들면 모든 콘텐츠를 닫자마자 1개만 열게 됩니다. 하지만 위의 순서가 바뀌면 누른 1개를 열라고 했는데 바로 모두 닫으라고 하니까 정상 작동이 안됩니다.