Question

我正在玩tooltips of jQuery UI。但是，我想要显示一个图像而不是文本。此外，图像取决于我悬停的文字。

我有一个包含一些数字的列表，所有相同的类：

<a class="images" href="#" title="">Number 0</a>
<a class="images" href="#" title="">Number 1</a>
<a class="images" href="#" title="">Number 2</a>

当我将鼠标悬停在第二个链接上时，应将索引（在本例中为1）传递给该函数，以便显示数字1。但是，我如何将索引传递给函数？

这是我的时间解决方案：

var number = 1; // only a temporal solution

$(".images").tooltip({
  content: '<img width="100" src="http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/256/Number-' + number + '-icon.png" />'
});

Here is a fiddle

Answer 1

您可以使用$ .each遍历图像，然后从元素HTML中查找数字。

$('.images').each(function() { 
    var number = $(this).html().replace('Number ', '');
    $(this).tooltip({
        content: '<img width="100" src="http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/256/Number-' + number + '-icon.png" />' 
    });
});

更新了小提琴 - http://jsfiddle.net/vdtvews6/1/

Answer 2

注意：添加自定义属性＆＃34;号码＆＃34;

更新您的Html

<a class="images" href="#" title="" number="1">Number 1</a>
<br /><br />
<a class="images" href="#" title="" number="2">Number 2</a>
<br /><br />
<a class="images" href="#" title="" number="3">Number 3</a>

<强>脚本

$(document).on('mouseenter','.images',function()
{
    var number = $(this).attr('number');
   $(this).tooltip({
    content: '<img width="100" src="http://icons.iconarchive.com/icons/iconarchive/red-orb-         alphabet/256/Number-' + number + '-icon.png" />'
}); 

});

Demo In Jsfiddle

带有图像的工具提示

2 个答案: