工具提示與圖像

-2

我在玩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。

來源

2016-07-29 user1170330

您可以使用$ .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/

來源

2016-07-29 09:34:38 Joe

是work..but如果文本被改變，那麼你的代碼不會work..See鏈接：http://jsfiddle.net/patelsumit5192/uzoqd9bh/ –

注：添加自定義屬性「數字」

更新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

來源

2016-07-29 09:40:25

工具提示與圖像

回答

相關問題