jQuery Cycle pagerAnchorBuilder
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1370127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Cycle pagerAnchorBuilder
提问by Casey Wight
I'm using the Cycle plugin for use in a news-rotator. This means I'm using Div's to populate the slides instead of images.
我正在使用 Cycle 插件用于新闻旋转器。这意味着我使用 Div 来填充幻灯片而不是图像。
My ultimate goal is to make a pager where instead of the usual 1, 2, 3, 4, etc. - it instead returns the first H3 tag in the slide.
我的最终目标是制作一个寻呼机，而不是通常的 1、2、3、4 等——而是返回幻灯片中的第一个 H3 标签。
I know this probably a minor selection issue, but here's what I'm using so far:
我知道这可能是一个次要的选择问题，但这是我目前使用的：
$('#scroll_wrap').cycle({
fx: 'fade',
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
}
I've also tried something like this:
我也试过这样的事情：
$('#scroll_wrap').cycle({
fx: 'fade',
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
var h3 = $('div',slide).children('h3');
return '<li><a href="#">' + slide.h3 + '</a></li>';
}
As you can probably tell, I'm still a fledgling. :/
正如你可能知道的那样，我仍然是一个初出茅庐的人。：/
Can anyone help me out with the seleciton??
任何人都可以帮助我进行选择吗？
回答by 3n.
Change the one line in your pagerAnchorBuilder function to this:
将 pagerAnchorBuilder 函数中的一行更改为：
return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';
Three things needed to be changed:
需要改变三件事：
slide => jQuery(slide)
Because jQuery doesn't extend elements with its helper functions unless you tell it to. This is an unfortunate side-effect of jQuery not extending the prototypes of natives (like Element). It means you have to wrap every third thing in your code with jQuery(x).
slide => jQuery(slide)
因为 jQuery 不会使用它的辅助函数扩展元素，除非你告诉它。这是 jQuery 没有扩展原生原型（如 Element）的一个不幸的副作用。这意味着您必须使用 jQuery(x) 在代码中包装每三个东西。
children("h3") => children("h3").eq(0)
Because selectors return arrays of objects matched, you should grab the first one after you do the selector otherwise the following method call in the chain will act on the set of elements. Jquery should offer things like .firstChild("h3").
children("h3") => children("h3").eq(0)
因为选择器返回匹配的对象数组，所以你应该在做选择器后抓取第一个，否则链中的以下方法调用将作用于元素集。Jquery 应该提供像 .firstChild("h3") 这样的东西。
textContent => .text()
textContent is a mozilla thing, and wont work on some browsers. Use jQuery's .text() method here. In this case jQuery did nothing wrong.
textContent => .text()
textContent 是 mozilla 的东西，在某些浏览器上不起作用。在这里使用 jQuery 的 .text() 方法。在这种情况下，jQuery 没有做错任何事情。
回答by Sougata Das
I have tried with this, and worked:
我试过这个，并工作：
$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
fx: 'scrollLeft',
speed: 300,
timeout: 5000,
next: '.next',
prev: '.previous',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children('.thumb').children().eq(0).attr("src");
return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
}
});
Sougata
总形
回答by dannyfilth
This is the solution for search into any DOM element:
这是搜索任何 DOM 元素的解决方案：
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}
回答by Drew Baker
I'm posting this, because this question comes up as a high rank. I think my solution is much more robust.
我发布这个，因为这个问题的排名很高。我认为我的解决方案更加健壮。
I moved away from the whole pageanchorbuilder thing, it's way to cumbersome for doing anything fancy. This is what I found worked better and gives you much more control over the thumbs.
我远离了整个 pageanchorbuilder 的事情，做任何花哨的事情都很麻烦。这是我发现效果更好的方法，可以让您更好地控制拇指。
First build out your Cycle stage and thumb tray like this:
首先像这样构建您的 Cycle 舞台和拇指托盘：
<div class="gallery">
<div class="stage">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
</div>
<div class="thumb-tray">
<div class="thumb">Anything in here</div>
<div class="thumb">Anything in here</div>
<div class="thumb">Anything in here</div>
</div>
</div>
Then use this JS to link the thumbnails to the slides. Basically, thumb 1 links to slide 1 and so on.
然后使用此 JS 将缩略图链接到幻灯片。基本上，拇指 1 链接到幻灯片 1 等等。
// Start Cycle
jQuery('.stage').cycle({
timeout: 0,
});
// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});
This will work with multiple Cycle gallery's on a page too. Keep in mind the slides don't have to be images. They stage could be built like this:
这也适用于页面上的多个 Cycle 画廊。请记住，幻灯片不必是图像。他们的舞台可以这样建造：
<div class="stage">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
