jQueryの基礎：独自HTML属性を使って汎用的なトグルボタンを作る

サンプルはこちら

See the Pen Basics of jQuery – Generic Popup toggle by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

前回紹介したトグルボタンでは、トグル用ボタンを押した時に特定のID要素をトグルさせていました。これではポップアップウィンドウごとにスクリプトの記述が必要で非効率的です。

それを今回は汎用的に使えるものに改良しました。

HTML

<div class="content">
  <button class="toggle" toggle-target="pop1">トグルボタン1</button>
  <button class="toggle" toggle-target="pop2">トグルボタン2</button>
  <button class="toggle" toggle-target="pop3">トグルボタン3</button>
</div>
<div class="popup" id="pop1">ポップアップ1</div>
<div class="popup" id="pop2">ポップアップ2</div>
<div class="popup" id="pop3">ポップアップ3</div>

 3つのボタンと3つのポップアップを配置しています。

ボタンには本来のHTML仕様にはない、「toggle-target」という属性を勝手に追加しています。

JavaScript

$(function () {
  $(".toggle").click(function(){
    //クリックしたボタンの「toggle-target」属性をID名として取得
    var target = "#" + $(this).attr("toggle-target");
    //取得したIDを対象にトグルする
    $(target).toggle();
  });
});

まず4行目に注目します。
targetという変数を作り、その中に「toggle-target」をもとにしたID名を格納しています。

4行目を分解します。

$(this).attr("toggle-target");

この行で使われている「attr()」関数は、指定した属性の値を取り出します。
「$(this)」はイベントの始まった本体、すなわちボタン自身を指すので、そのボタンより「toggle-target」の値を取り出します。

"#" + $(this).attr("toggle-target");

そしてこの記述は、取り出した「toggle-target」に文字列として頭に「#」を結合させています。
これにより「#pop1」といった文字列にしてtargetに格納しています。

そして6行目でtargetに対してtoggleをかけています。

これによって、HTML側で「toggle-target」を指定するのみで任意の要素にtoggleがかけられる作りとなります。