jQuery - DOM要素とJavascriptオブジェクトをリンクするにはどうすればいいですか？

Question

私はjavascriptオブジェクトをdom要素とリンクできますが、これが適切に行われる方法を見つけることはできません。例：インベントリを含むページを開くと、そのページに含まれるすべてのアイテムが読み込まれ、イメージの上にマウスを置くと、いくつかの情報を含む小さなツールチップが作成されます。よく、これらの項目の多くはページにあります。DOM要素をオブジェクトにリンクして、そのプロパティに簡単にアクセスできるようにしたいと考えています。私は私の自己を正しく説明しています。

は、私は、インベントリ内にこれを持っていたと言う：

<div id="slot1"><img id="item1"></div> 

<div id="slot2"><img id="item2"></div> 

と私はスロット1およびスロット2と呼ばれるjavascriptオブジェクトを持っていると言う：

オブジェクトSLOT1がツールチップに表示する必要のあるすべてのプロパティを持っています私はmouseoverイベントでこのような何かをしたいと思います：私はちょうど言うよりよくそれを説明する必要がある場合

this.showTooltip() 

任意のヘルプは素晴らしいTYだろう！

-Thaiscorpion

Answer 1

だけjavascriptオブジェクトは、それは見てのオブジェクトのIDを知っています。

function Tooltipper(divID) { 
    this.id = divID; 
} 

Tooltipper.prototype.showTooltip = function() { 
    // do tooltip stuff 
    $('#' + this.id).tooltip(); // assuming that it has a tooltip thing 
}; 

var slot1 = new Tooltipper('slot1'), 
    slot2 = new Tooltipper('slot2'); 

そして：代わりにIDを渡すの

slot1.showTooltip();

いっそ、オブジェクトを渡す：

var slot1 = new Tooltipper($('#slot1'));

そうしないこの道を毎回DOMルックアップを行う必要があります。

Answer 2

使用jQuery data：あなたはこのイベントを登録することができます前に、

$("div.hasToolTip").hover(
    function() { 
     //Get the associated data with the DOM element 
     //with $(this).data(someKey) 

     showToolTip($(this).data('toolTipInformation')); 
    }, 
    function() { 
     //Here you can hide all tooltips 
    } 
); 

明らかに、あなたは$(selector).data(key, value)を持つすべてのDOM要素にオブジェクトを割り当てる必要があります。

これらの例では、ツールチップが必要なすべてのDOM要素に.hasToolTipという名前のクラスがあると想定しています。

機能の詳細については、jQuery documentationを参照してください。