中級編クリア

ProgateでjQuery 中級編をクリアしたけど中身がわかってないので振り返り

thisの構文

thisはイベントが起こった要素を取得することができる。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

のようなli要素に対しクリックしたli要素のみcolorをredにしたい場合は以下のようにする。

$('li').click(function(){
  $(this).css('color','red');
})

clickイベントの時にモーダルを表示したいのでcssで通常は非表示にしておく。

セレクタ { display:none; }

jQueryでclickイベントを設定し、fadeInメソッドでモーダルを表示する。例としてid=btnをclickした時に、class=modalを表示したい場合は

$('#btn).click(function(){
  $('.modal').fadeIn();
});

となり、逆にモーダルを非表示にする場合はセレクタに対してfadeOutメソッドで隠します。

hasclassメソッドは引数に指定したクラスをオブジェクトが持っているかを判定する。
持っていればtrue、持っていなければfalseを返す。

$('.answer').hasclass('open')  //結果 false  
$('.answer open').hasclass('open')  //結果 true

判断した後にif文を用いて,結果に応じた処理を行うことも出来る。