jQuery:多个 'tipsy' 工具提示

Question

当我从数据库中返回结果列表时，它们显示如下:

Result 1
Result 2
Result 3

等等...现在我已经让 jQuery Tipsy 插件开始工作，因此当您将鼠标悬停在结果 1 的顶部时，它会显示该人员的用户名。问题是，如果我将鼠标悬停在结果 2 上，也应该出现 Tipsy 工具提示，但它只是显示正常的浏览器工具提示。

我假设这是因为结果 a 标记上的所有 id 的名称都相同:“east”。我想我需要对 jQuery 中的每项检查进行某种操作，但我不太清楚在 jQuery 中的何处添加它。

有人能解决这个问题吗？

Answer 1

您的问题是所有 3 个 a 标记上具有相同的 ID。在任何情况下都不允许将相同的 ID 应用于同一页面上的多个元素。您需要解决这个问题。

<a href="result_one.html" id="result_one" class="tipsy">Result 1</a>
<a href="result_two.html" id="result_two" class="tipsy">Result 2</a>
<a href="result_three.html" id="result_three" class="tipsy">Result 3</a>

您可以将相同的类应用于所有三个 a 标记，然后将 Tipsy 应用于该类。

$(document).ready(function() {
  $('.tipsy').tipsy({fade:true,gravity:'n'});
});

或者你可以单独做每个ID。

$(document).ready(function() {
  $('#result_one').tipsy({fade:true,gravity:'n'});
  $('#result_two').tipsy({fade:true,gravity:'n'});
  $('#result_three').tipsy({fade:true,gravity:'n'});
});