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

jQuery - How to link together a DOM element and a Javascript object?

本文关键字：Javascript 对象 链接 在一起 元素 DOM jQuery-      更新时间：2023-09-26


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

比如说我在库存中有这个：

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

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

对象slot1具有需要在工具提示中显示的所有属性，所以我想在mouseover事件中做这样的操作：

this.showTooltip()

如果我需要更好地解释，只要说！

-Thaiscorpion

使用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
   }
);

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

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

有关.data()函数的更多信息，请参阅jQuery文档。

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

相关文章：