使用「每個」以獲得一個鏈接插入到一個jQuery提示

我使用的是從jquerytools此提示：使用「每個」以獲得一個鏈接插入到一個jQuery提示

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

，並希望從現有的「詳細信息」鏈接中插入一個鏈接到它同裏：

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

這是一個失敗的小提琴：

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

如何將兩者鏈接在一起，或者使用.each將正確的鏈接放入工具提示中？

來源

2011-04-05 nathanbweb

那很難做bc工具提示沒有鏈接到個人'li'的任何東西... – Neal 2011-04-05 21:21:43

這是一個有趣的問題要解決。感謝分享。 – 2011-04-05 22:03:26

由於添加了工具提示的方式，這並不是特別容易，並且在對象和易於使用的工具提示之間似乎沒有直接鏈接。

什麼是稍微容易的就是這樣的事情，將鏈接添加到標題，然後將其製作成提示：

// 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",}); 
});

去通過有img
每個li獲取下一個對象，在你的情況下，它是一個錨點
從主播獲取鏈接
檢查鏈接實際上是鏈接（也有一些沒有鏈接）
如果有一個鏈接，將其添加到標題（這將成爲提示）
最後補充工具提示

See it working here

來源

2011-04-05 21:36:14 Scoobler

你最好的選擇可能是爲每個圖像創建自己的工具提示。

<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的工具，文檔，添加.tooltip容器後立即發送到插件的元素，應該做的伎倆。

來源

2011-04-05 21:35:14 Daniel

把此代碼：

$.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上試過了，它工作正常。

來源

2011-04-05 22:01:49

使用「每個」以獲得一個鏈接插入到一個jQuery提示

回答

相關問題