Использование 'each', чтобы получить ссылку для вставки в подсказку jQuery - PullRequest
Новая
       3

Использование 'each', чтобы получить ссылку для вставки в подсказку jQuery

1 голос
/ 06 апреля 2011

Я использую эту подсказку из 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, чтобы получить правильную ссылку в подсказке?

Ответы [ 3 ]

2 голосов
/ 06 апреля 2011

Это не особенно легко из-за способа добавления всплывающих подсказок, и, кажется, нет прямой связи между объектом и всплывающей подсказкой, которую легко подобрать.

Что такоенемного проще, чтобы это было примерно так, добавьте ссылку на заголовок, прежде чем она будет превращена во всплывающую подсказку: 

// 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
  • Получить следующий объект, который в вашем случае является якорем
  • Получить ссылку с якоря
  • Проверить, что ссылка на самом деле является ссылкой (есть некоторые без ссылки)
  • Если была ссылка, добавьте ее к заголовку (которая станет подсказкой)
  • Наконец добавьте подсказку

Посмотрите, как это работает здесь

1 голос
/ 06 апреля 2011

Введите этот код: 

$.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"});

Что он делает, так это создает расширение .outerHtml для jquery, которое позволяет вам получить полный html-элемент. Затем мы добавляем его к названию ДО того, как оно превратится во всплывающую подсказку.

Я только что попробовал его на вашем jFiddle, и он отлично работает.

1 голос
/ 06 апреля 2011

Лучше всего было бы создать собственную подсказку для каждого изображения.

<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 сразу после элемента, отправляемого в плагин, должно сработать.

...