【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~書き方と各メソッド~】勉強メモ①](https://qiita.com/k-yasuhiro/items/dfe305ff337e6ac8b406) [【jQuery~準備(読み込み)~】勉強メモ②](https://qiita.com/k-yasuhiro/items/c5f8aa277bd572d89cb4) [【jQuery~モーダルの表示・非表示~】勉強メモ③](https://qiita.com/k-yasuhiro/items/15449ad19f85275393e8) [【jQuery~hoverイベント~】勉強メモ④](https://qiita.com/k-yasuhiro/items/da51d0b1baa5e16c69e1)