Jquery 使用$.ajax的qTip2哈希导航

基本上，我正在创建散列导航，将用户直接带到页面标题，作为悬停上的链接列出

我试图将不同页面上的

h1

元素与其子元素

span id

值配对。

h1

文本是每个

href

中显示的文本，

span id

值是url的哈希值

我使用qTip2来显示“parent”li元素下的链接，该元素将用户带到页面而不使用散列。我正在使用

$.ajax

获取

h1

和

span id

值。源代码直接来自qTip2网站，可以找到

这很有效；然而，让散列值与

h1

文本值匹配不是很好

下面的代码完美地输出了除散列以外的所有内容。我只得到一个

id

值，而不是所有值。我已成功创建了一个带有

span id

值的数组，但不知道如何将它们与

h1

父级正确配对，以便为每个链接创建正确的url

以下是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
        }
    });
});

---

对于存在此问题或希望实施我的解决方案的任何其他人，以下是我所做的：

    $('#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>';
                }
            }
        });
    });

$（'#桌面ul li.menu a'）。每个（函数（）{
$（此）.qtip({
内容：{
文本：函数（事件、api）{
var$url=$（this.attr（'href'）；
var$title=$（this.text（））
$.ajax({
url:$（this.attr（'href'），
})
.then（函数（url）{
var$数据=“”；
var$headers=$（url）.find（“#maincontent h1”）；
$headers.each（函数（）{
如果（$headers.length>1）{
$data+=''；
}
否则{
api.销毁（真实）；
}
});
api.set（'content.text'，$data）；
}，函数（xhr，状态，错误）{
api.set（'content.text'，status+'：'+错误）；
});
返回“正在加载…”；
}
}
});
});

    $('#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>';
                }
            }
        });
    });