Question

我正在使用tooltipster插件在地图上触发60多座建筑物的名称。每个位置都是一个div，工具提示会在悬停在相应元素上方时显示。我还有一张地图底部的位置列表。我已经研究了如何在每个列表项的鼠标悬停时启动插件并启动相应的工具提示。

我想知道的是如何以这样的方式编写这个函数，所以我不需要编写60多次，编号有变化。这就是我所拥有的：

$(document).ready(function() {
$('.tooltip').tooltipster();
$('#link-1').mouseover(function() {
$('#apDiv1').tooltipster('show');
$('#link-1').mouseout(function() {
$('#apDiv1').tooltipster('hide');

$('#link-2').mouseover(function() {
$('#apDiv2').tooltipster('show');
$('#link-2').mouseout(function() {
$('#apDiv2').tooltipster('hide');           
});
});
});
});
});

所有东西都是连续编号的。有任何想法吗？在此先感谢您的帮助！

添加带有工具提示的div的编码示例：

<div class="number tooltip" title="Message about location 1" id="apDiv1">1</div>

  <div class="number tooltip" title="Message about location 2" id="apDiv2">2</div>

Answer 1

给出相同的类名，而不是分配给不同的ID，然后使用工具提示函数。

$(document).ready(function() {
   $('.tooltip').tooltipster();
   $('.link').mouseover(function() {
   $('.appDiv').tooltipster('show');
   $('.link').mouseout(function() {
   $('.appDiv').tooltipster('hide');
});

如何编写一个迭代连续编号选择器的jQuery函数

1 个答案: