jQuery bind 実行しているインスタンスにひもづけ

2009/03/10

こんばんは。きんくまです。

JavaScriptもだいぶ慣れてきました。
それで、今回はjQueryのEventについてです。
説明がうまくできないのですが、こんなことをしたかったのです。

クラスからつくったインスタンスの中にjQueryObjectをうめこむ。
clickなどのイベントをとる。
そのとき、ひもづけているインスタンスを取得する。

で、click()といったヘルパ関数で頑張ってみました。が、いくらやっても、できません。
click(function(){ alert(this) });
とやっても、この中のthisはあくまでもDOM要素。なので、ひもづけているインスタンスにはなりません。

それで、マニュアルみていたら、bind(type, [data], fn)
の[data]に、インスタンスの参照をもたせたところうまくいきました。
→bind(type, [data], fn)（いつも利用させてもらってます。ありがとうございます。）

よくわからないと思うので、サンプルをアップしました。
→サンプルはこちらから。

JSのソース部分

var TabMenus = function(selecter){
  this.jq = $(selecter);
  this.point = {x:this.jq.offset().left, y:this.jq.offset().top + 30};
  this.jq
    .mouseover(function(){
      $(this).addClass('over');
    })
    .mouseout(function(){
      $(this).removeClass('over');
    })
}

$(function(){
  var tab;
  for(var i = 0; i < 3; i++){
    tab = new TabMenus('#mytext' + (i + 1));
    tab.jq.bind("click",
      {self: tab},
      function(e){
        tabClickHD(e.data.self);
      }
    )
  }
});

function tabClickHD(tab){
  $('#koitsu')
  .stop()
  .animate({
    left:tab.point.x,
    top:tab.point.y
  }, 0.6 * 1000, "easeOutQuad");
}