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。

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