#jquery #cycle #jquery-cycle
#jquery ( jquery ) #цикл #jquery-цикл
Вопрос:
Я собираю навигацию для главной страницы сайта и пытаюсь заставить 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>
Ответ №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>';
}
});
Кстати, я предполагаю, что вам не хватает закрытия div
в вашем HTML выше.
Комментарии:
1.Вы уверены
prop
, что это уместно? Я думаю, вам следует использоватьattr.
api.jquery.com/prop2. Это не работало для меня до тех пор, пока я не изменил pagerEvent на mouseover, но теперь переходы исчезают при наведении курсора мыши между ссылками. Я все еще получаю их при перемещении мыши со слайда на ссылку.
3. @kkjelgard: Я не уверен, что понимаю. Что именно не работает? Насколько я понял ваш вопрос, вы хотите, чтобы ссылки на пейджеры содержали то же
href
значение,a
что и теги, содержащиеся в слайдах, верно? Это то, что делает приведенный выше код. Вот jsFiddle с чрезвычайно упрощенной демонстрацией: jsfiddle.net/DVVrr/1 Можете ли вы предоставить более подробную информацию о том, что именно вы ищете?4. Ваш код работает для того, о чем я спрашиваю в этом посте, поэтому я отмечу, что на него ответили. Спасибо вам за вашу помощь! Проблема сейчас (которая, я думаю, могла возникать и раньше) заключается в том, что при перемещении мыши между ссылками на пейджер переход отсутствует. Я постараюсь продолжать поиски, если вы не знаете быстрого решения.
5. @kkjelgard: Я рад помочь. Однако, похоже, я не могу воспроизвести вашу последнюю проблему: jsfiddle.net/DVVrr/3 Когда я наведу курсор мыши на каждую ссылку пейджера, я увижу следующий переход слайда слева. Я что-то упустил? Можете ли вы создать jsFiddle, который повторяет проблему?