Блог

Я собираю навигацию для главной страницы сайта и пытаюсь заставить 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>';
    } 
});
 

Мне нужно, чтобы он использовал ссылку href из ссылки, которая содержится в div каждого слайда, в качестве ссылки на пейджер. Я нашел вопрос, который казался похожим на этот, но без необходимости вставлять ссылку внутрь.

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>
 

В 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>';
    } 
});
 

Кстати, я предполагаю, что вам не хватает закрытия div в вашем HTML выше.