jQuery - 如何将DOM元素和Javascript对象链接在一起？

Question

我希望能够将JavaScript对象与DOM元素链接起来，但是找不到正确的方法来实现这一点。举个例子：当打开一个包含库存的页面时，它会加载其中包含的所有物品，当我悬停在其中的图像上时，它会创建一个带有一些信息的小工具提示。页面上会有很多这样的物品，我希望能够将DOM元素与对象链接起来，以便可以轻松地访问其属性。我希望我表述清楚了。

比如，在库存中有这样一个东西：

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

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

假设我有两个 JavaScript 对象 slot1 和 slot2：

对象 slot1 包含了需要在工具提示中显示的所有属性，因此我想在 mouseover 事件中执行以下操作：

this.showTooltip()

任何帮助都将是极好的，如果我需要更好地解释，请告诉我！- Thaiscorpion

- Thaiscorpion

---

http://plugins.jquery.com/project/cluetip - mplungjan

Answer 1

使用 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文档以获取有关.data()函数的更多信息。

- Arxisos

---

好的，我会看一下那个函数，它看起来对这个有用，谢谢！ - Thaiscorpion

Answer 2

只需让 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');

然后：

slot1.showTooltip();

或者更好的方法是，不要传递ID，而是传递对象： var slot1 = new Tooltipper($('#slot1')); 这样你就不必每次进行DOM查找。

- beatgammit