javacriptで便利な要素の指定方法

要素に対してクリックやフォーカスをあてた際に、要素ごとにイベント内容を変えたい場合によく使う要素の指定方法。



$(function() {
  $(要素).click(function() {
    var num = $(要素).index(this);
    //条件文
  });
});

どういうときに使うかというと、以下のようなhtmlソースがある場合

<div>テスト1</div>
<div>テスト2</div>
<div>テスト3</div>
・
・
・

「テスト1」をクリックしたら処理A、「テスト2」をクリックしたら処理B、「テスト3」押したら・・・といった場合に、それぞれの処理を書くと以下のようになる。

$(function() {
  $("div").eq(0).click(function() {
    //処理A
  });
  $("div").eq(1).click(function() {
    //処理B
  });
  $("div").eq(2).click(function() {
    //処理C
  });
  ・
  ・
  ・
});

これを先述した方法で書くとこうなる↓

$(function() {
  $("div").click(function() {
    var num = $("div").index(this); //クリックしたdivの番号を取得 ※番号は0から始まる。
    switch(num) {
      case 0:  //クリックしたdivの番号が「0」番目だったら
        //処理A
        break;
      case 1:  //クリックしたdivの番号が「1」番目だったら
        //処理B
        break;
      case 2:  //クリックしたdivの番号が「2」番目だったら
        //処理C
        break;
        .
        .
        .
    }
  });
});

となり各要素に対して毎回イベントハンドラを設定しなくてすむ。条件次第でソースもスッキリさせられる。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です