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

Posted 2023-02-15

【中文标题】jQuery - 如何将 DOM 元素和 Javascript 对象链接在一起？

【英文标题】：jQuery - How to link together a DOM element and a Javascript object?

【发布时间】：2011-10-06 15:55:28

【问题描述】：

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

假设我在库存中有这个：

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

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

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

对象 slot1 具有需要在工具提示中显示的所有属性，所以我想在鼠标悬停事件中执行类似的操作：

this.showTooltip()

如果我需要更好地解释它，任何帮助都会很棒！

-泰国蝎子

【问题讨论】：

plugins.jquery.com/project/cluetip

【参考方案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 documentation 了解有关.data() 函数的更多信息。

【讨论】：

好，看看那个功能，它看起来对这个很有用，ty！

【参考方案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 查找。