自动从一个 div 复制文本并用 fullpage.js 替换另一个 div 中的文本

问题描述

对于我的作品集，我正在使用 fullpage.js 构建一个新网站。我的目标是将数据锚与脚本结合起来，在每张幻灯片 (.caption) 上复制一些隐藏的文本，并在加载幻灯片时将其替换为另一张幻灯片 (.current-caption)。理想情况下，它应该垂直和水平工作（部分和幻灯片），尽管我最初的投资组合只是水平的。我正在为幻灯片使用 afterSlideLoad，并且我已经阅读过，第一张幻灯片/部分需要 afterLoad。

我看过这个解决方案：Change Content of Target Div on Slide Change – 但它不起作用。我想 fullpage.js 自 2015 年以来发生了重大变化，或者其他地方出了问题。

我的 js/jquery 编程技能很少，如果有人可以帮助我让我的 JSfiddle 水平和垂直工作，从而帮助其他人，我将不胜感激。

到目前为止我得到了这个（另见下面我的 JSfiddle）：

<div class="current-caption"><p>.current-caption</p></div>

<div id="fullpage">

    <div class="section" data-anchor="S1" style="background-color: #ddd;"> 
                    
        <div class="slide" data-anchor="S1s1">
            <h1>S1s1</h1>
            <div class="caption"><p>Caption text for S1s1</p></div>
        </div>
        
        <div class="slide" data-anchor="S1s2">
            <h1>S1s2</h1>
            <div class="caption"><p>Caption text for S1s2</p></div>
        </div>

    </div> 
    
    <div class="section" data-anchor="S2" style="background-color: #fff;"> 
        
        <div class="slide" data-anchor="S2s1">
            <h1>S2s1</h1>
            <div class="caption"><p>Caption text for S2s1</p></div>
        </div>
        
        <div class="slide" data-anchor="S2s2">
            <h1>S2s2</h1>
            <div class="caption"><p>Caption text for S2s2</p></div>
        </div>

    </div> 
    
</div> 

var myFullpage = new fullpage('#fullpage',{
    verticalCentered: true,autoScrolling: true,controlArrows: true,afterSlideLoad: function(section,origin,destination,direction){
        var slide_html = $(this).find(".caption").html ();
        $(".current-caption").html(slide_html); 
    },afterLoad: function(origin,direction){
        var section_html = $(this).find(".caption").html ();
        $(".current-caption").html(section_html); 
    }
});

我的 JSfiddle 在这里：https://jsfiddle.net/JorgenB/x78qo2f9/16

解决方法

试试这个：

 var slide_html = $(destination.item).find(".caption").text();
 $(".current-caption").text(slide_html);

https://jsfiddle.net/tilwinjoy/hspo65v9/11/