gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 03:42:55 25 4
gpt4 key购买 nike

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

我有一个链接,其中包含图像的 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/

最佳答案

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

关于jquery - 根据 href 在 jquery-ui 工具提示中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16914731/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com