在jquery-ui工具提示中基于href显示图像

Question

所有通常的警告都适用:我确信这可能已经在另一个问题中解决了，但我找不到答案。

我有一个链接，与href到一个图像。为此，我应用jquery UI的工具提示小部件。

工具提示应该显示图像。

当图像硬编码到content方法时，此方法有效，但当它由attr计算时则无效。但是，记录attr将显示正确的字符串。

HTML:

<a href="http://localhost.pearl-island-dev/wp-content/themes/pearlIsland/assets/img/floorplans/tip-example.jpg" class="hotspot" title="shouldbeatooltip" style="left:800px; top:500px;">HELLO</a>

JQUERY:

$('.hotspot').tooltip({
tooltipClass: 'imageHotspot',
position: { my: "center top-200", at: "right center" }, 
content:"<img src='"+$(this).attr('href')+"' />",
open: function(){console.log($(this).attr('href'))}
});

控制台:

  http://localhost.pearl-island-dev/wp-content/themes/pearlIsland/assets/img/floorplans/tip-example.jpg
X > GET http://localhost.pearl-island-dev/real-estate/apartments/apartments-floorplans/undefined 404 (Not Found)

我不知道为什么对图像的绝对引用被取代似乎是一个相对的-相同的字符串硬编码到内容方法做我想要的工作，但我需要从每个热点获得不同的值。

希望有人能给我指出正确的方向。

提前感谢。

这里有一把小提琴…(谢谢你的建议)

http://jsfiddle.net/8XpMZ/1/

Answer 1

您的this不一致，这里它指的是window，但是当您创建一个函数时，它将应用于您的elt.hotspot，因此this将设置为该函数应用的元素。

简答:将其封装在函数中

http://jsfiddle.net/techunter/8XpMZ/3/

$('.hotspot').tooltip({
        tooltipClass: 'imageHotspot',
        position: {
            my: "center top-200",
            at: "right center"
        },
        content: function(){
            return "<h1>" + $(this).attr('href') + "</h1>";
        },
        open: function () {
            $('#debugText').html($(this).attr('href'))
        }
    });

Answer 2

这将使图像作为您的工具提示内容:

jQuery(document).ready(function ($) {
$('.hotspot').tooltip({
    tooltipClass: 'imageHotspot',
    position: { my: "center top-200", at: "right center" }, 
    content: function()
        {
            return "<img src='" + $(this).prop('href') + "' />";
        },
    open: function(){$('#debugText').html($(this).attr('href'))}});
    $('.hotspot').click(function(e){
        e.preventDefault();
    })
});