jquery - 根据 href 在 jquery-ui 工具提示中显示图像

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)

我不确定为什么对图像的绝对引用被看似相对的引用所取代 - 硬编码到内容方法中的相同字符串可以完成我想要的工作，但我需要从中获取不同的值每个热点。

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

提前致谢。

这是一个 fiddle ...(感谢您的建议)

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'))
        }
    });