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函数中，“幻灯片”指的是当前<div class="nav-cycle-item">。要获取每个href中每个<a>标记的div，只需使用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。

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

1 个答案: