Question

我正在使用jquerytools的工具提示：

  $("li img").tooltip({ position: "bottom right"});

并希望从同一个li中的现有“更多信息”链接中插入一个链接：

var morelink;
morelink = $(this).find("li a").attr("href");
$(".tooltip").append('<a href="' + morelink + '">More Info</a>');

这是一个失败的小提琴：

http://jsfiddle.net/nathanbweb/tEVnt/

如何将两者链接在一起，或者使用.each，以获得正确的工具提示链接？

Answer 1

由于添加了工具提示的方式，这并不是特别容易，并且在对象和工具提示之间似乎没有直接链接，这很容易被接收。

更简单的是这样的事情，在将标题添加到工具提示之前添加标题的链接：

// add tooltip from jquerytools 
$("li img").each(function(){
    var obj = $(this);
    var link = obj.next('a').attr('href');
    if (link !== undefined) {
        var title = obj.attr('title');
        title = title+' <a href="' + link + '">More Info</a>';
        obj.attr('title', title);
    }
    obj.tooltip({ position: "bottom right",});
});

浏览具有li

img

获取您的案例中的下一个对象
从锚点
检查链接实际上是一个链接（有些没有链接）
如果有链接，请将其添加到标题（将成为工具提示）
最后添加工具提示

See it working here

Answer 2

您最好的选择可能是为每张图片创建自己的工具提示。

<img src="http://dummyimage.com/100/eee/444.jpg&text=image1">
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus.</div>
<a title="permanent link" href="http://example.com/1.html">More Info</a>

构建工具提示，如：

$(".tooltip").each(function(){
    var obj = $(this);
    obj.append(obj.prev().attr("title"), obj.next().clone());
});

根据jQuery-tools文档，在发送到插件的元素之后添加.tooltip容器应该可以解决问题。

Answer 3

输入此代码：

$.fn.outerHtml = function()
{
if (this.length)
{
var div = $('<div style="display:none"></div>');
var clone =
$(this[0].cloneNode(false)).html(this.html()).appendTo(div);
var outer = div.html();
div.remove();
return outer;
}
else
return null;
};

$('li').each(function(){
    $(this).children("img").attr("title", $(this).children("img").attr("title") + $(this).children("a").outerHtml());
});

之前

$("li img").tooltip({ position: "bottom right"});

它的作用是为jquery创建一个.outerHtml扩展，允许您获取元素的完整html。然后，我们将它附加到标题之前变为工具提示。

我刚刚在你的jFiddle上尝试过，它运行正常。

使用'each'获取插入jQuery工具提示的链接

3 个答案: