HTML tag hide(), show() / div, img 등

HTML의 div와 같은 tag를 1번 시퀀스에서 안 보이다가 2번 시퀀스에 보이게 하고 싶다. 

(방법만 알고 있다면 반대로 1번 시퀀스에서 보이다가 2번 시퀀스에 안 보이게 구현할 수 있다.)

 

만약 div 태그를 function a() 시퀀스에서 보였다가 function init() 시퀀스에서 안 보이게 하고 싶고 // 아래 웹 페이지 그림상 파랑 네모 표시 참조

 

반대로, img, h 태그를 function a() 시퀀스에서 숨겼다가 function init() 시퀀스에서 보이게 하고 싶다면 // 아래 웹 페이지 그림상 빨강 네모 표시 참조

 

<div id="loading" class="animated bounce">

     <div class="spinner-border" role="status">

          <span class="sr-only">Loading...</span>

     </div>

     <p class="text-center">AI가 당신의 얼굴 사진을 분석 중입니다.</p>

</div>

<h3 class="pt-4  upload-img-text">당신에게 어울리는 컬러와 피해야 할 컬러를 확인해보세요!</h3>

<img id="image-container" class="img-file-upload" src="">

 

 

function a() {

     $('#loading').show();   

     $('.upload-img-text').hide();

     $('#image-container').hide();

     

     init().then(function () {

          $('#loading').hide();   

          $('.upload-img-text').show();

          $('#image-container').show();

 };

 

function init() {                   

 };

 

스탠바이

function a() 시퀀스

function init() 시퀀스

function 함수 안에서  각 tag별로 보이게 하거나(show) 숨기게 하는(hide)를 설정을 한다.

 

코드를 분석하건대 위와 같은 show() 혹은 hide() 기능을 적용할 경우,

show(), hide() 적용 대상의 class를 활용한다면 각각 $('.클래스').show(), $('. 클래스').hide()로 

 

show(), hide() 적용 대상의 id를 활용한다면 각각 $(#.id').show(), $(#. id'). hide()로 하면 될 것이다.