jQuery Cycle - 从 div 内的链接创建寻呼机链接

Question

我正在为网站的首页制作一个导航，我正在尝试让 Cycle 使用来自 div 中包含的链接的自定义寻呼机链接。

这是我当前的代码：

$('#nav-cycle').before('<ul id="nav">').cycle({ 
    fx:     'turnLeft', 
    speed:  'fast', 
    timeout: 9001,
    pagerEvent: 'click',
    pauseOnPagerHover: 1,
    pager:  '#frontpage-nav', 
    allowPagerClickBubble: true, 
    pagerAnchorBuilder: function(idx, slide) { 
         return '<li><a href="#">' + slide.title + '</a></li>';
    } 
});

我需要它来使用每张幻灯片的 div 中包含的链接中的 href 作为寻呼机链接。我发现了一个与此类似的问题，但无需获取内部链接。

按要求提供 HTML，去除所有 PHP：

<div id="frontpage-nav"></div>

<div id="nav-cycle">
<div class="nav-cycle-item" title="(page title)">
<p class="nav-item-description">(page description text)</p>
<span class="page_link"><a href="(link)">(page title)</a></span>
</div>

Answer 1

在pagerAnchorBuilder函数中，“slide”指的是当前的<div class="nav-cycle-item">。要在每个div 中获取每个<a> 标记的href，只需使用jQuery 选择器找到子<a> 并获取它的href 值：

$('#nav-cycle').before('<ul id="nav">').cycle({ 
    fx:     'turnLeft', 
    speed:  'fast', 
    timeout: 9001,
    pagerEvent: 'click',
    pauseOnPagerHover: 1,
    pager:  '#frontpage-nav', 
    allowPagerClickBubble: true, 
    pagerAnchorBuilder: function(idx, slide) { 
        var href = $(slide).children('span').children('a').attr('href');
        return '<li><a href="' + href + '">' + slide.title + '</a></li>';
    } 
});

顺便说一句，我假设您在上面的 HTML 中缺少结束 div。