Jquery 在不丢失内容的情况下切换类

我有

div#container

，它包含两个div

div.current-content

和

div.next-content

两者都充满了一些内容。
如何在不丢失数据的情况下在下一个内容和当前内容之间切换类

这是我最初的原因，但由于这个原因，我失去了当前内容中的一切

changeContent = function (direction, toLoad) {

    if (direction == 'next') {
        container.append('<div class="next-content"></div>');
        toScroll = -contentWidth;
    } else {
        container.prepend('<div class="next-content"></div>').css('margin-left', -contentWidth);
        toScroll = 0;
    }

    container.css('width', contentWidth * 2);
    $('.current-content, .next-content').css('width', contentWidth);
    $('.next-content').load(toLoad, '', function () {

        // PSEUDO 3D                
        if (direction == 'next') {
            $('.next-content .content')
                .css('margin-left', contentWidth * 2)
                .animate({
                'margin-left': (contentWidth / 2) - 485
            }, {
                duration: speed,
                easing: 'easeInOutQuad',
                complete: function () {
                    $('.content').css('margin-left', 'auto');
                }
            });
            $('.current-content .content')
                .css('margin-left', (contentWidth / 2) - 485)
                .animate({
                'margin-left': -contentWidth
            }, {
                duration: speed,
                easing: 'easeInOutQuad'
            });
        } else {
            $('.next-content .content')
                .css('margin-left', -contentWidth * 2)
                .animate({
                'margin-left': (contentWidth / 2) - 485
            }, {
                duration: speed,
                easing: 'easeInOutQuad',
                complete: function () {
                    $('.content').css('margin-left', 'auto');
                }
            });

            $('.current-content .content')
                .css('margin-left', (contentWidth / 2) - 485)
                .animate({
                'margin-left': contentWidth * 2
            }, {
                duration: speed,
                easing: 'easeInOutQuad'
            });
        }
        container.animate({
            'margin-left': toScroll
        }, {
            duration: speed,
            easing: 'easeInOutQuad',
            complete: function () {

                container.css({
                    'margin-left': 0,
                        'width': 'auto'
                });
                $('.current-content').remove();
                $('.next-content').addClass('current-content').removeClass('next-content');
                $('.current-content').css('width', '100%');
            }
        });
    }

changeContent=功能（方向、负载）{
如果（方向==“下一步”）{
容器。附加（“”）；
toScroll=-contentWidth；
}否则{
container.prepend（“”）.css（'margin-left'，-contentWidth）；
toScroll=0；
}
css（'width'，contentWidth*2）；
$（'.current content，.next content'）.css（'width'，contentWidth）；
$（'.next content'）.load（toLoad'，函数（）{
//伪三维
如果（方向==“下一步”）{
$（'.next content.content'）
.css（'margin-left'，contentWidth*2）
.制作动画({
“左边距”：（contentWidth/2）-485
}, {
持续时间：速度，
放松：'轻松外四'，
完成：函数（）{
$（'.content'）.css（'margin-left'，'auto'）；
}
});
$（'.current content.content'）
.css（'margin-left'，（contentWidth/2）-485）
.制作动画({
“左边距”：-contentWidth
}, {
持续时间：速度，
放松：'轻松外四'
});
}否则{
$（'.next content.content'）
.css（'margin-left'，-contentWidth*2）
.制作动画({
“左边距”：（contentWidth/2）-485
}, {
持续时间：速度，
放松：'轻松外四'，
完成：函数（）{
$（'.content'）.css（'margin-left'，'auto'）；
}
});
$（'.current content.content'）
.css（'margin-left'，（contentWidth/2）-485）
.制作动画({
“左边距”：contentWidth*2
}, {
持续时间：速度，
放松：'轻松外四'
});
}
容器动画({
“左边距”：toScroll
}, {
持续时间：速度，
放松：'轻松外四'，
完成：函数（）{
container.css({
“左边距”：0，
“宽度”：“自动”
});
$（'.current content'）.remove（）；
$（'.next-content'）.addClass（'current-content'）.removeClass（'next-content'）；
$（'.current content'）.css（'width'，'100%'）；
}
});
}

在

changeContent

函数的末尾，您正在调用：

$('.current-content').remove();

这将删除类为

的元素。当前内容为
。您应该使用css或javascript/jquery将其隐藏，而不是这样做

使用css：


最好分配一个新类，例如
.prev content
在css文件中，添加
显示：无
或
可见性：隐藏

使用jQuery：


我仍然建议在css中分配一个新类
选择元素并使用
$（“{selector}”）隐藏它。hide（）

如果要将其显示回来，可以删除
.prev content
类并添加
.current content
回来，或者使用jQuery选择它并使用
$（“{selector}”）取消隐藏它。show（）

{selector}
表示只选择要隐藏/显示的元素的选择器。发布带有标记的JSFIDLE将有助于澄清您的问题。感谢您的建议。非常有用。：）