3


我希望能够将 javascript 对象与 dom 元素链接,但找不到正确完成此操作的方法。一个例子:说当打开一个带有库存的页面时,它会加载其中包含的所有项目,当我将鼠标悬停在其中的图像上时,它会创建一个包含一些信息的小工具提示。好吧,页面上会有很多这些项目,我希望能够将 DOM 元素与一个对象链接起来,这样我就可以轻松访问它的属性。我希望我能正确地解释我的自我。

说我在库存中有这个:

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

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

并说我有一个名为 slot1 和 slot2 的 javascript 对象:

对象 slot1 具有需要在工具提示中显示的所有属性,因此我想在鼠标悬停事件中执行以下操作:

this.showTooltip()

如果我需要更好地解释它,任何帮助都会很好,只是说!

-泰国蝎子

4

2 回答 2

4

使用jQuery 数据

$("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
   }
);

显然,在注册此事件之前,您必须将对象分配给每个 DOM 元素,使用$(selector).data(key, value).

这些示例期望每个应该有工具提示的 DOM 元素都有一个名为.hasToolTip.

查看jQuery 文档以获取有关该.data()函数的更多信息。

于 2011-07-16T08:12:09.533 回答
0

只需让 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 查找。

于 2011-07-16T07:48:11.717 回答