Question

我有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%');
            }
        });
    }

Answer 1

在changeContent功能结束时，您正在呼叫：

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

这将删除类.current-content的元素。而不是这个，你应该使用css或javascript / jquery来隐藏它。

使用css：

最好分配一个新类，例如.prev-content
在您的css文件中，添加display: none或visibility:hidden

使用jQuery：

我仍然建议在css
选择元素并使用$("{selector}").hide()

如果您想要显示它，可以删除.prev-content类并添加.current-content，或者只使用jQuery和取消隐藏选择它，使用$("{selector}").show()。

{selector}代表一个选择器，用于选择要隐藏/显示的元素

切换类而不会丢失内容

1 个答案: