将项目添加到fullpage.js幻灯片更改中的div

Question

我有一个基于fullpage.js的网站，我需要在每个幻灯片上的html的某些部分附加到标题。一切都很好，除了一件事 - 我无法弄清楚如何避免重复的内容。每当我更改幻灯片而不是获取新项目并删除旧项目时，我会看到2个或更多（取决于我打开的幻灯片数量）

var headerData = $('#data-header');
var slideData = $('.fp-slide.active .slide-data');

$('.slide').each(function(){
     if ($(this).hasClass('active')) {
         var slideData = $(this).find('.slide-data');
          slideData.prependTo(headerData);
        } else {
        // need to remove it somehow but remove() or hide() isnt working
        }
    });

我在afterSlideLoad fullpage.js事件上运行此代码。

Answer 1

试试这个：

var headerData = $('#data-header');
var slideData = $('.fp-slide.active .slide-data');

$('.slide').each(function(){
    if ($(this).hasClass('active')) {
        var slideData = $(this).find('.slide-data');
        slideData.html('') // before adding new header data, first clear the old one
        slideData.prependTo(headerData);
    }
});