jQuery Cycle - 从 div 内的链接创建分页器链接

发布于 2024-12-13 09:23:45 字数 914 浏览 4 评论 0原文

我正在为网站的首页整理一个导航，并尝试让 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>

原文

I'm putting together a nav for the front page of a site and I'm trying to get Cycle to use a custom pager link from the link contained inside a div.

Here's my current code:

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

I need it to use the href from the link that is contained in each slide's div as the pager link. I found a question that seemed similar to this but without needing to get the link inside.

HTML as requested, with all the PHP stripped:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囚你心 2024-12-20 09:23:45

在 pagerAnchorBuilder 函数中，“slide”指的是当前

。要获取每个 div 中每个标记的 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 。

In the pagerAnchorBuilder function, "slide" refers to the current <div class="nav-cycle-item">. To get the href of each <a> tag within each div, just use a jQuery selector to find the child <a> and get it's href value:

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

BTW, I'm assuming you're missing a closing div in your HTML above.

回复收藏 0 原文

~没有更多了~