인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

윤종호님의 프로필 이미지
윤종호

작성한 질문수

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

차이점을 알려주세요

작성

·

151

1

1번 예제

HTML

<a href="#none" class="show-btn">보이기</a>
<a href="#none" class="hide-btn">감추기</a>
  <p>
    태그선택자 a를 클릭했습니다.
  </p>
 

jQuery

$(function () {
  $("p").css({"display":"none"});
 
  $(".show-btn").click(function () {
    $("p").css({"display":"block"})
  });
 
  $(".hide-btn").click(function () {
    $("p").css({"display":"none"})
  });
});
 
 
2번 예제

HTML

<a href="#none" class="show-btn">보이기</a>
<a href="#none" class="hide-btn">감추기</a>
  <div>Box</div>
 

jQuery

$(function () {
  $("div").css({"display":"none"});
  $(".show-btn").click(function () {
    $("div").show()
  });
  $(".hide-btn").click(function () {
    $("div").hide()
});
 
 
 
1번 예제하고 2번 예제 둘다 보여주고 감추는 기능을 하는 명령문? 들 인데 2번예제의 jQuery를 1번 예제의 jQuery 처럼
작성해서 실행 시켜봤더니 동작이 안되네요?? 그 이유를 알 수 있을까요??

답변 1

0

결과는 같습니다.

1번은 css 메서드로 보이고 감추고 하는 방식이고,

2번은 show hide 메서드로 보이고 감추고 하는 방식입니다.

차이점은 어떤 메서드를 사용하느냐의 차이지 다른 것은 없습니다.

1번 보다는 2번이 편할 것으로 생각됩니다.

윤종호님의 프로필 이미지
윤종호

작성한 질문수

질문하기