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

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

탭 메뉴 콘텐츠(스타일 01) with JQUERY

작성

157

안녕하세요 선생님!

너무 재밌게 강의 듣고 있는 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");
  });
</script>

수업에서 설명주셨던 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

감사합니다~!!

jquery HTML/CSS

답변 1

코딩웍스(Coding Works)

지식공유자

앞으로 이 부분은 항상 만나게 되는 경우입니다.

모두 닫고 1개만 열기... 라고 생각하시면 됩니다.

브라우저는 html, css, js 파일 모두 위에서 아래도 읽습니다.

단 한 줄의 차이라도 먼저 나오고 나중에 나오고가 매우 중요합니다.

▼ 아래 코드는 모든 콘테츠를 안보이게 해라.. 입니다.

$(".testimonial .content").removeClass("active");

▼ 아래 코드는 누른 1개만 보이게 해라.. 입니다.

$("#" + $(this).attr("data-alt")).addClass("active");

곧, 위에처럼 정상 순서로 만들면 모든 콘텐츠를 닫자마자 1개만 열게 됩니다.

하지만 위의 순서가 바뀌면 누른 1개를 열라고 했는데 바로 모두 닫으라고 하니까 정상 작동이 안됩니다.

khhan1990

질문자

아..!! 모든 컨텐츠를 안보이게 한 뒤 1개만 보이게 해라였군요.

저는 1개를 먼저 보이게 한 뒤 그걸 제외한 컨텐츠를 없애라는 쪽으로 해석했는데, 설명을 듣고 다시 코드를 보니 제가 잘못 이해했었네요.

항상 잘 설명해주셔서 감사드립니다!!

인프런 커뮤니티 질문&답변

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