Подсказка jQuery + содержимое ajax

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

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

РЕДАКТИРОВАТЬ: после прочтения некоторых полезных комментариев я изменил свой ответ, чтобы идентификатор не начинался с целого числа, поскольку он нестандартный и может работать не во всех браузерах. Как видите, код split / [] извлекает номер идентификатора из строки идентификатора.