2

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

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

然后工具提示应显示图像。

这在图像被硬编码到内容方法中时有效，但在由 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>

查询：

$('.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/

4

2 回答 2

3

你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'))
        }
    });
于 2013-06-04T11:27:29.737 回答
0

这将使图像成为您的工具提示内容：

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

});
于 2013-06-04T11:49:34.857 回答