Как связать вместе элемент 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

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

Очевидно, что прежде чем вы сможете зарегистрировать это событие, вы должны назначить объект каждому элементу DOM с помощью $(selector).data(key, value).

В этом примере предполагается, что у каждого элемента DOM, который должен иметь всплывающую подсказку, есть класс с именем .hasToolTip.

Обратитесь к документации jQuery для получения дополнительной информации о функции .data().

Answer 2

Просто пусть объект javascript знает идентификатор объекта, который он наблюдает.

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();

Или, что еще лучше, вместо передачи идентификатора, передайте объект:

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

Таким образом, вам не нужно каждый раз выполнять поиск DOM.