jQuery tooltip + ajax content

Question

Я пытаюсь реализовать прокрутку всплывающей подсказки для изображений на странице, где, когда вы просматриваете изображение, вы получаете небольшое окно подсказки и загружаете содержимое из базы данных через AJAX.

Я могу взломать это вместе быстро, но мне нужен элегантный способ сделать это без использования встроенного JS.

Итак, мой вопрос: если я захвачу событие опрокидывания внутри моего внешнего файла .js, как передать его идентификатор базы данных?

Я использую JQuery, так что я бы сделать что-то вроде этого:

$('.item_roll').mouseover(function() { 
    //show tooltip and load ajax content 
} 

и мой HTML будет что-то вроде этого:

<img src="thumb.png" class="item_roll" /> 

без вызова функции из тега IMG, как отправить JS-вызов над идентификатором базы данных? Я надеюсь, что в этом есть смысл.

Спасибо.

Answer 1

Я рекомендую иметь как класс и идентификатор в теге изображения:

<img src="thumb.png" id="id_28436379" class="item_roll" /> 

Затем в случае JQuery, вы можете получить доступ, что как так:

$(".item_roll").mouseover(function(event){ 
    alert(event.target.id.split("_")[1]); // displays 28436379 
}); 

Это должно позволить вам доступ идентификатор базы данных, сделав его идентификатором тега изображения.

EDIT: после чтения некоторых полезных комментариев я изменил свой ответ, чтобы идентификатор не начинался с целого числа, поскольку он нестандартен и может не работать во всех браузерах. Как вы можете видеть, код split/[] извлекает номер id из строки id.