【JS】クリックイベントをまとめる

【JS】クリックイベントをまとめる



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

Bootstrapに組み込まれているコンポーネントを見ていたら、もっと単純化して使いやすいようにまとめようと思いました。

手順としては、以下のようにデータ属性値をつける。

属性値詳細
data-event="toggle"イベントの起点
data-parent="" イベントトリガーグループ名
data-target=""ターゲットセレクタ
data-group=""ターゲット親グループ名
data-class=""ターゲットに追加するクラス
data-active=""イベントトリガーに追加するクラス

ドロップダウンのように、非アクティブになると非表示になる場合は、イベントトリガーとターゲットにtabindexを追加

jQueryの流れは以下の通り。
① イベントトリガーをクリックする
② イベントトリガーがグループ化されている場合、一旦全てのアクティブクラスを削除
③ ターゲットがグループ化されている場合、ターゲット以外の追加クラスを削除
④-1 ターゲットが追加クラスを持っていたら、ターゲットから追加クラスを削除、イベントトリガーからアクティブクラスを削除
④-2 ターゲットが追加クラスを持っていなかったら、ターゲットに追加クラス、フォーカスの移動、イベントトリガーにアクティブクラスを追加、ターゲットにイベントトリガーのターゲットセレクタ名を追加
—————

$(document).on('click', '[data-event="toggle"]', function (e) {
	e.preventDefault();
	// 親グループ
	var parent = $(this).data('parent');
  // ターゲットグループ
  var group = $($(this).data('group'));
	// ターゲット
	var target = $($(this).data('target'));
	// 追加クラス
	var cls = $(this).data('class');
  // アクティブクラス
  var active = $(this).data('active');
	// 一旦親のクラス削除
  $('[data-parent="'+parent+'"]').each(function () {
    $(this).removeClass(active);
	});
  // 一旦ターゲットグループのクラス削除
  group.each(function () {
    $(this).children().not(target).removeClass(cls);
	});
	// ターゲットにクラス.
	if (target.hasClass(cls)) {
    $(this).removeClass(active);
		target.removeClass(cls);
	} else {
    $(this).addClass(active);
		target.addClass(cls).attr('data-focus', $(this).data('target')).focus();
	}
});
$(document).on('blur', '[data-focus]', function (e) {
  // ソース
  var source = $('[data-target="' + $(this).data('focus') + '"');
  // 追加したクラス
  var cls = source.data('class');
  // 追加したクラスを削除
  $(this).removeClass(cls);
  // アクティブクラス
  var active = source.data('active');
  // ソースからアクティブクラスも削除
  source.removeClass(active);
});

※マウスオーバーはモバイルファーストを考慮すると不要。

今日はここまで

コメントを残す

メールアドレスが公開されることはありません。