JQuery ubernoob在这里。我试图将活动幻灯片的文本放到目标div中以实现与此类似的操作。
http://www.davidchipperfield.co.uk/project/valentino_new_york
我正在使用Alvaro Trigo的fullPage.js多页面滑块，并且希望能够在每次幻灯片更改时更新单独div中的标题。我已成功使用.appendTo通过查找活动类来获取当前div并在目标div中显示其内容但它只能工作一次。我觉得我很接近，但在这里真的可以使用一些帮助。每次幻灯片放假后我是否需要使用.empty（）？看起来滑块已经为当前幻灯片分配了一个活动类，这可能会也可能不会让我的生活更轻松。或者我离开了，还有更好的方法吗？
这是我到目前为止所得到的：
$(document).ready(function() {
$('#fullpage').fullpage({ slidesNavigation: true, css3:true, slidesNavigation: false,
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
$('.slide.active p').each(function(){
$(this).appendTo('#current-caption');
});
}});
});
<div id="fullpage">
<div class="section">
<div class="row">
<div class="slow-fade" data-stellar-ratio=".7">
<div class="small-centered medium-centered large-centered large-12 columns">
<h1>Portfolio</h1>
<h2>A selection of recent works.</h2>
</div>
</div>
</div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption active"><p>First Caption</p></div></div>
<div class="slide"><div class="caption"><p>Second Caption</p></div></div>
<div class="slide"><div class="caption"><p>Third Caption</p></div></div>
<div class="slide"><div class="caption"><p>and the 4th</p></div></div>
</div> <!-- section -->
<div class="section">Some section</div> <!-- section -->
<div class="section">Some section</div> <!-- section -->
</div>
<footer class="portfolio-footer">
<div class="footer-nav">
<div class="row">
<div class="large-3 columns">
<div id="current-caption"></div>
</div><!--large-3-->
<div class="large-6 columns">
<p> 1/5 </p>
</div><!--large-6-->
<div class="large-3 columns">
<p> Read More </p>
</div><!--large-6-->
</div><!--row-->
</div>
</div><!-- footer-nav -->
</footer><!-- portfolio-nav -->
答案 0 :(得分：0)
通过each()与.slide一起找到caption并将其附加到#current-caption
$('.slide').each(function(){
if($(this).hasClass('active')) { // find out if it is active slide;
var get_html = $(this).find(".caption").html(); // get active slide caption text/html
$("#current-caption").html(get_html); // do something with it
}
});
答案 1 :(得分：0)
不太确定你的问题是什么。理想情况下，您应该在jsfiddle或codepen中提供复制品。
但我会选择这样的事情：
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
$(this).find('p').appendTo('#current-caption');
}
考虑到回调中的$(this)引用了活动幻灯片，显示为in the docs：
var loadedSlide = $(this);
答案 2 :(得分：0)
请参阅此jsfiddle以查看我如何使用fullPage.js创建固定页脚的完整代码，其中每张幻灯片的信息（以html的形式）在页脚中填充三个字段，包括部分更改和幻灯片更改。< / p>
https://jsfiddle.net/poweredbydinoflesh/qww1kL3v/3/
<div id="fullpage">
<div class="section">
<div class="row">
<div class="slow-fade" data-stellar-ratio=".7">
<div class="caption"><p> </p></div>
<div class="page-number"><p> </p></div>
<div class="small-centered medium-centered large-centered large-12 columns">
<h1>Portfolio</h1>
<h2>A selection of recent works.</h2>
</div>
</div>
</div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>first caption</p></div>
<div class="page-number"><p>Lorem ipsum amet principurum</p></div></div>
<div class="slide"><div class="caption"><p>Second Caption</p></div>
<div class="page-number"><p>1/3</p></div></div>
<div class="slide"><div class="caption"><p>Third Caption</p></div>
<div class="page-number"><p>2/3</p></div></div>
<div class="slide"><div class="caption"><p>and the 4th</p></div>
<div class="page-number"><p>3/3</p></div></div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>1st in Second</p></div>
<div class="page-number"><p>Chlorum dolor und losicious</p></div></div>
<div class="slide"><div class="caption"><p>2nd in the new sec</p></div><div class="page-number"><p>1/3</p></div></div>
<div class="slide"><div class="caption"><p>3rd in sec</p></div><div class="page-number"><p>2/3</p></div></div>
<div class="slide"><div class="caption"><p>BOOYA!</p></div><div class="page-number"><p>3/3</p></div></div>
</div> <!-- section -->
<div class="section">Some section
<div class="slide"><div class="caption"><p>1st in 3rd section</p></div><div class="page-number"><p> </p></div></div>
<div class="slide"><div class="caption"><p>2nd in 3rd</p></div><div class="page-number"><p>1/2</p></div></div>
</div> <!-- section -->
</div>
<footer class="portfolio-footer">
<div class="footer-nav">
<div class="row">
<div class="large-3 columns">
<div class="current-caption"></div>
</div><!--large-3-->
<div class="large-6 columns">
<div class="current-page"></div>
</div><!--large-6-->
<div class="large-3 columns">
<p> Read More </p>
</div><!--large-3-->
</div><!--row-->
</div>
</div><!-- footer-nav -->
</footer><!-- portfolio-nav -->
<script>
$(document).ready(function() {
$('#fullpage').fullpage({ slidesNavigation: true, css3:true, slidesNavigation: false,
onLeave: function(index, newIndex, direction){
if (index == 0 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 1 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 2 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 3 && direction == 'down'){
var section_html = $(this).next().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).next().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if (index == 4 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 3 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
else if(index == 2 && direction == 'up'){
var section_html = $(this).prev().find(".caption").html ();
$(".current-caption").html(section_html);
var section_html = $(this).prev().find(".page-number").html ();
$(".current-page").html(section_html);
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
var get_html = $(this).find(".caption").html ();
$(".current-caption").html(get_html);
var get_html = $(this).find(".page-number").html ();
$(".current-page").html(get_html);
}
});
});
</script>
**我很肯定我可能以一种效率低得多的方式做到这一点，但我是jQuery的新手，所以我很想知道如何做得更好。欢迎任何和所有的想法。