Jquery 在幻灯片更改时更改目标Div的内容

这里是JQuery ubernoob。我试图将活动幻灯片的文本放入目标div，以实现类似的效果

我正在使用Alvaro Trigo的多页滑块，希望能够在每次幻灯片更改时在单独的div中更新标题。我已经成功地使用了.appendTo，通过找到活动类来获取当前div并在目标div中显示其内容，但它只工作一次。我觉得我很接近，但我真的需要一些帮助。每次幻灯片离开后，我是否需要使用。清空？看起来滑块已经为当前幻灯片分配了一个活动类，这可能会让我的生活更轻松，也可能不会。还是说我离这太远了，还有更好的方法吗

到目前为止，我得到的是：

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

在.slides中查找每个标题，将其附加到当前标题中

---

不太清楚你有什么问题。理想情况下，您应该在JSFIDLE或codepen中提供复制

但我会选择这样的方式：

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

考虑到回调中的$this引用了活动幻灯片，如下所示：

---

请参阅此jsfiddle以查看我如何使用fullPage.js创建固定页脚的完整代码，其中来自每张幻灯片的信息以html的形式填充页脚中的三个字段，其中包括部分更改和幻灯片更改

非常感谢@mancharymanchaary帮助我以正确的方向执行这段代码，感谢@alvaro提供了一个惊人的插件，并让大家注意到$this的作用

---

**我敢肯定，我做这件事的效率可能比我能做的要低得多，但我是jQuery新手，所以我很想知道如何做得更好。欢迎提出任何意见

请尝试在所有幻灯片中逐一查看，并在其中找到活动的；$'。幻灯片'。每个函数{if$this.hasClass'active'{//do smth；}}@MancharyManchaary谢谢。尽管这允许我为.caption分配一个活动类，但仍然不太存在，直到现在我还不能这样做。太近了！我是不是错过了一些简单的东西$document.readyfunction{$'fullpage'。fullpage{slidesNavigation:true，css3:true，slidesNavigation:false，afterSlideLoad:functionanchorLink，index，slideAnchor，slideIndex{$'.slide'。每个函数{if$this.hasClass'active'$'。caption.active'。追加到'current caption'；}；}；尝试var get_html=$this.find.caption.html$current-caption.htmlget_html；或.appendget_html；并尝试控制台记录get_html变量，查看其是否工作right@MancharyManchaary你是上帝！非常感谢，不客气。我将为其他用户回答同样的问题

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

var loadedSlide = $(this);

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