改变幻灯片目标Div的内容

Question

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

Answer 1

通过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
      }
  });

Answer 2

不太确定你的问题是什么。理想情况下，您应该在jsfiddle或codepen中提供复制品。

但我会选择这样的事情：

afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
     $(this).find('p').appendTo('#current-caption');
}

考虑到回调中的$(this)引用了活动幻灯片，显示为in the docs：

var loadedSlide = $(this);

Answer 3

请参阅此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>&nbsp;</p></div>
         <div class="page-number"><p>&nbsp;</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>&nbsp;</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>

• 非常感谢@mancharymanchaary帮助我以正确的方向执行此代码，并感谢@alvaro提供了一个惊人的插件，并引起了人们对$（this）角色的关注

**我很肯定我可能以一种效率低得多的方式做到这一点，但我是jQuery的新手，所以我很想知道如何做得更好。欢迎任何和所有的想法。