【jQuery~hasClass 메소드~】공부 메모 ⑤

jQuery에 대해 배우는 중.
이번은 「hasClass 메소드」에 대해.
거의 자신의 공부 메모입니다.
과도한 기대는하지 마십시오.

hasClass 메소드

hasClass 메소드란

- 인수로 지정한 클래스가, 대상의 HTML 요소에 그 클래스가 있는지를 확인할 수 있다.
그 클래스를 가지고 있으면 true, 가지고 있지 않으면 false를 돌려준다.
　
　 - 기본적인 쓰기

기본 구조

対象要素.hasClass( 'クラス名' );
// クラス名指定の際、ドットは必要無し

　
　-반환값
hasClass()는, 특정의 클래스를 검출할 때에 「true/false」로 돌려주는 특성이 있다.
지정한 클래스를 검출했을 경우는 「true」, 검출할 수 없었던 경우는 「false」를 돌려준다.

HTML

<div class="modal">hasClassメソッド</div>

jQuery

var $div = $('div').hasClass('modal');

console.log( div );

검출 결과

true

if 문을 사용하여 응용

if 문을 사용한 개폐 조작

　-이런

　-표시·숨기기는, 클릭했을 때에 대상의 HTML 요소에,
예를 들면, open 클래스 (여기의 이름은 뭐든지 OK)를 가지고 있으면, (질문의 대답이 현재 표시되고 있다고 판단할 수 있으므로) open 클래스를
㈜제외 대답을 숨긴다. open 클래스가 없는 경우는 그 반대.

jQuery

if(対象要素.hasClass( 'クラス名' )){
  // クラスを外す処理
  // 答えを隠す処理
}else{
  // クラスを付ける処理
  // 答えを表示させる処理
}

샘플 코드

HTML

<ul id="faq-list">
  <li class="faq-list-item">
    <div class="box">
      <h3 class="question">次回のオリンピック開催国は？</h3>
      <span>+</span>
    </div>
    <div class="answer">
      <p>一応まだ日本です。</p>
    </div>
  </li>
</ul>

CSS

.answer {
  display: none;
}

.box{
  display: flex;
}

span{
  padding-top: 12px;
  font-size: 25px;
}

jQuery

$(function() {
  $('.faq-list-item').click(function(){
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')) { 
      // removeClassメソッドを用いてクラスを外す
      $answer.removeClass('open');
      // slideUpメソッドを用いて、$answerを隠す
      $answer.slideUp();

      // 子要素のspanタグの中身をtextメソッドを用いて書き換える
      $(this).find('span').text('+');

    } else {
      // addClassメソッドを用いてクラスを付ける
      $answer.addClass('open'); 
      // slideDownメソッドを用いて、$answerを表示
      $answer.slideDown();

      // 子要素のspanタグの中身をtextメソッドを用いて書き換える
      $(this).find('span').text('-');
    }
  });
});

　-$('.faq-list-item').click(function( ){ }
이벤트 구문을 사용하여 $('セレクタ').イベント名(function(){ }); click 이벤트 만들기

-var $answer = $(this).find('.answer');
jQuery의 변수 선언에는 var를 사용
find 메소드는, 모든 자손 요소중에서, 지정한 셀렉터를 가지는 요소를 취득

　- $(this).find('span').text('+');
text 메소드를 사용하는 것으로, 재기록할 수 있다$('セレクタ').メソッド().メソッド()... 와 같이 쓰는 것으로 각각의 메소드가 적용된다(메소드 체인)

과거 게시물 기사

【jQuery～쓰는 방법과 각 메소드～】공부 메모①
【jQuery～준비(로드)～】공부 메모②
【jQuery~모달 표시·숨기기~】 공부 메모③
【jQuery~hover 이벤트~】공부 메모④