jQuery tooltip + ajax content

Question

イメージのロールオーバー時に小さなツールチップウィンドウが表示され、AJAX経由でデータベースから内容がロードされるような、ページ上のイメージ用の単純なロールオーバーツールチップを実装しようとしています。

私はこれをすばやくハックすることができますが、インラインJSを使用しないでこれを行うエレガントな方法が必要でした。

だから私の質問は：私は私の外部の.jsファイル内のロールオーバーイベントをキャプチャした場合、私はそれのデータベースID渡す方法を教えてください。

私は、私はこのようなものだろうにjQueryを使用しています：

$('.item_roll').mouseover(function() { 
    //show tooltip and load ajax content 
} 

を、私のHTMLは、このようなものになるだろう：どのように、imgタグから関数を呼び出すことなく

<img src="thumb.png" class="item_roll" /> 

JS idの上にJSコールを送信するのですか？私はそれが理にかなったことを願う

ありがとうございました。

Answer 1

私は、画像タグにクラスとidの両方を有するお勧めします。

<img src="thumb.png" id="id_28436379" class="item_roll" /> 

その後、あなたのjQueryのイベントでは、あなたがそうのようなものを入手することができます。

$(".item_roll").mouseover(function(event){ 
    alert(event.target.id.split("_")[1]); // displays 28436379 
}); 

これはあなたのアクセスをさせてくださいそれをイメージタグのidにすることによってデータベースIDを取得します。

編集：idは整数で起動しないように、これは非標準であり、すべてのブラウザで動作しない場合がありますので、いくつかの有益なコメントを読んだ後、私は、私の答えを変更しました。ご覧のとおり、split/[]コードはid文字列からid番号を抽出します。