使用 $.ajax 的 qTip2 哈希导航

Question

基本上，我正在创建哈希导航以将用户直接带到页眉，在悬停时列为 link。

我正在尝试将各个页面上的 h1 元素与其 children span id 值配对。 h1 文本是每个 href 中显示的文本，span id 值是 url.

的哈希值

我正在使用 qTip2 在 "parent" li 元素下显示 links，这会将用户带到没有散列的页面。我正在使用 $.ajax 来获取 h1 和 span id 值。源代码直接来自qTip2网站，可以找到here.

效果很好；然而，不太有效的是让散列值与 h1 文本值相匹配。

下面的代码完美地输出了除散列之外的所有内容。我只得到 id 值之一，而不是所有值。我已经成功创建了一个包含 span id 值的数组，但不知道如何将它们与它们的 h1 parents 正确配对以创建正确的 url 每个 link.

这里是 qTip 代码：

$('li.menu a').each(function() {
    $(this).qtip({
        content: {
            text: function(event, api) {
                var originalURL = $(this).attr('href');
                $.ajax({
                    url: $(this).attr('href')
                })
                .then(function(url) {
                    var $wrap = $("<div></div>").append(url);
                    var titles = $wrap.find("#maincontent h1 > *").unwrap().wrap('<a href="' + originalURL + "#" + $wrap.find('span').attr('id') + '" />').parent();

                    api.set('content.text', titles);
                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                });

                return 'Loading...';
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            adjust: {
                y: 10
            }
        },
        hide: {
            delay: 1000,
            event: 'mouseleave',
            fixed: true
        }
    });
});

如何配对值以创建每个 link，其中 h1 作为显示文本，child span id 值作为散列？我愿意接受任何建议。

更新：添加到以下原始问题的解决方案：

$('#desktop ul li.menu a').each(function() {
    $(this).qtip({
        content: {
            text: function(event, api) {
                var $url = $(this).attr('href');
                var $title = $(this).text()
                $.ajax({
                    url: $(this).attr('href'),
                })
                .then(function(url) {

                    var $data = '';
                    var $headers = $(url).find('#maincontent h1');
                    $headers.each(function(){
                        if ($headers.length > 1) {
                            $data += '<a href="' + $url + '#' + $(this).children().attr('id') + '" class="' + $title + '">' + $(this).text() + '</a>';
                        }
                        else {
                            api.destroy(true);
                        }
                    });

                    api.set('content.text', $data);                     

                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                });

            return '<div class="navi-loading">Loading...</div>';
            }
        }
    });
});

Answer 1

对于遇到此问题或想要实施我的解决方案的任何其他人，这是我所做的：

    $('#desktop ul li.menu a').each(function() {
        $(this).qtip({
            content: {
                text: function(event, api) {
                    var $url = $(this).attr('href');
                    var $title = $(this).text()
                    $.ajax({
                        url: $(this).attr('href'),
                    })
                    .then(function(url) {

                        var $data = '';
                        var $headers = $(url).find('#maincontent h1');
                        $headers.each(function(){
                            if ($headers.length > 1) {
                                $data += '<a href="' + $url + '#' + $(this).children().attr('id') + '" class="' + $title + '">' + $(this).text() + '</a>';
                            }
                            else {
                                api.destroy(true);
                            }
                        });

                        api.set('content.text', $data);                     

                    }, function(xhr, status, error) {
                        api.set('content.text', status + ': ' + error);
                    });

                return '<div class="navi-loading">Loading...</div>';
                }
            }
        });
    });

使用 $.ajax 的 qTip2 哈希导航

qTip2 hash navigation using $.ajax

ajax

url

hash

jquery

qtip2