jQuery工具提示+ ajax内容

Question

我正在尝试为页面上的图像实现一个简单的翻转工具提示，当您翻转图像时，会得到一个小工具提示窗口，并通过AJAX从数据库加载内容。

我可以快速一起破解这个，但我想要一个优雅的方式来做到这一点，而不使用任何内联JS。

所以我的问题是：如果我在外部.js文件中捕获翻转事件，我该如何传递数据库ID？

我正在使用jQuery，所以我会做这样的事情：

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

我的HTML会是这样的：

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

如果不从img标签调用函数，如何将JS调用发送到数据库ID之上？我希望这是有道理的。

感谢。

Answer 1

我建议在图片标记中同时包含一个类和一个id：

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

然后在你的jQuery事件中，你可以这样访问：

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

这可以让你通过使它成为图像标记的id来访问数据库id。

编辑：在阅读了一些有用的评论之后，我改变了我的答案，以便id不以整数开头，因为这是非标准的，可能不适用于所有浏览器。如您所见，split / []代码从id字符串中提取id号。