読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

thisキーワード

thisキーワード

  • JavaScript予約語
  • thisは、標準の要素オブジェクト
  • jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります
  • 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます
  • その時の流れに応じて意味するものが変わります
イベントハンドラ内のthis
  • htisは、イベント処理の対象となる要素自体を指します(セレクタと同義)
  • thisというキーワードを使うことで、どの要素が対象となったか特定できます
  • thisは、jQueryオブジェクトではない「DOM要素」のため、jQueryメソッドを続けて書くことができません
  • jQueryのメソッドを使えるようにする場合は、「$( this )」とすることで可能になります

《onメソッドを使用しない場合》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>thisキーワード</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( 'input[type=button]' ).click( function() {
    var val = $(this).val();
    alert( val );
  });
  console.log( val );
});
</script>
</head>
<body>
<form>
<input type="button" value="HTML">
<input type="button" value="CSS">
<input type="button" value="JavaScript">
</form>
</body>
</html>
onメソッドの利用
  • onメソッドは、offメソッドでイベントを外すことが可能
  • appendメソッドで「後から追加される」要素に対してもイベントを付与することが可能
  • スマートフォンのイベントを取得する際に「$( 'セレクタ' ).on( 'touchstart' )」が使用可能です


《onメソッドを使用した場合》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>thisキーワード</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( 'input[type=button]' ).on( 'click', function() {
    var val = $(this).val();
    alert( val );
    console.log( val );
  });
});
</script>
</head>
<body>
<form>
<input type="button" value="HTML">
<input type="button" value="CSS">
<input type="button" value="JavaScript">
</form>
</body>
</html>

this:アコーディオンメニューの場合

  • 基本形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script>

</script>
</head>
<div id="sidebar">
<dl class="news">
<dt>カテゴリA</dt>
<dd>ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。</dd>
<dt>カテゴリB</dt>
<dd>ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。</dd>
<dt>カテゴリC</dt>
<dd>ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。</dd>
</dl>
</div>
</body>
</html>


記述手順
  1. 最初は、クリックされたら開く部分「dd」をすべて閉じておく
  2. 「dt」をクリックされたら開く部分「dd」をセレクタとして記述する
  3. 「dd」が、すでに開いていれば、閉じる命令をする


(1)「dd」をすべて閉じておく

  $( '.news>dd' ).hide();


(2)「dt」をクリックされたら「dd」を開く

  • 閉じられている時には、開く
  $( '.news>dt' ).on( 'click', function() {
    if( $( '+dd',this).css( 'display' ) == 'none' ) {
      $( '+dd',this).slideDown();
    }


(3)「dd」が、すでに開いていれば、閉じる

  • 「dd」が、すでに開いていることを前提に閉じる命令を記述しておけば、それ以外は (2) の条件が「true」の時のみ開くことができます
  $( '.news>dt' ).on( 'click', function() {
    $( '.news>dd' ).slideUp();
    if( $( '+dd',this).css( 'display' ) == 'none' ) {
      $( '+dd',this).slideDown();
    }
  });