裏紙に書く程度の内容

jQuery Classに情報を設定しよう

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

classに情報を設定しよう

についてです。

classに情報を設定するということ

これはよく使う手法です。

DOMに状態を設定する時に、クラスを使うということです。こうすることで、選択クエリ等で簡単に状態が判別できます。

使用例

タブメニューなんかをイメージするとわかりやすいかと思います。

<ul id='my-menu'>
    <li class='active'>menu1
    <li>menu2
    <li>menu3
</ul>

<button type='button' id='test'>Click Me!</button>
// メニュークリックイベント
// クリックされた要素に'active'を追加する
$('#my-menu').on('click', 'li', function() {
    $('#my-menu li').removeClass('active');
    $(this).addClass('active');
});

// ボタンクリックイベント
// 現在アクティブなメニュー名を表示する
$('#test').on('click', function() {
    console.log($('#my-menu .active').text());
});

リストにしたメニューをクリックしたら、その要素だけactiveというクラスをセットします。
“Click Me!”ボタンを押したら、メニュー内のactiveというクラスを持った要素を取得しています。

実際に動かしてみると以下のような感じ。

  • menu1
  • menu2
  • menu3

結論

よく使う方法なので必須知識。

Index