CHROMA

世の中の "当たり前" を確認する

開閉モーダルの実装

Dev

初めは jQuery でこのように書いていました。

$(document).ready( function() {
  $('.help-balloon').click( function() {
    $('.help-modal').toggle();
  });
  $('.help-modal').click( function() {
    $('.help-modal').hide();
  });
});

しかし、指摘を受けて次のように変更しました。

$(function() {
  var $helpModal = $('.help-modal');
  $('.help-balloon').on('click', function() {
    $helpModal.toggle();
  });
  $('.help-modal').on('click', function() {
    $helpModal.hide();
  });
});

変更内容:

  • (document).readyの削除 ... ready イベントの省略構文が用意されているため
  • click イベントから on を使ったイベント設定への変更 ... jQuey 1.7 以降、on が推奨されているため
  • .help-balloon の変数化 ... DOM の探索などの処理を繰り返し行わないため
  • 不要なスペースの削除

参考

指摘してもらった内容を元に、あとで色々見ました。
on は複数のイベントが設定できるところが便利そうですね。