Question

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

我尝试将各个页面上的h1元素与其子span id值配对。 h1文本是每个href中显示的文字，span id值是网址的哈希值。

我使用qTip2显示＆＃34; parent＆＃34;下的链接。 li元素，它将用户带到没有哈希的页面。我使用$.ajax来获取h1和span id值。源代码直接来自qTip2网站，可以找到here。

这很有效;然而，不能正常工作的是使哈希值与h1文本值匹配。

以下代码完美地输出除散列之外的所有内容。我只给出了id个值中的一个而不是全部值。我已成功创建了一个包含span id值的数组，但不知道如何将它们与h1父项正确配对，以便为每个链接创建正确的网址。

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

如何将值配对以创建每个链接，并将h1作为显示文本，将子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>';
            }
        }
    });
});

使用$ .ajax进行qTip2哈希导航

0 个答案: