Question

我有以下代码。当用户在较小的窗口中查看时，它会添加并更改HTML：

        if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {

            //    REVERT BACK TO NORMAL   
        };

但是，当用户随后展开窗口时，更改将保留在屏幕上。撤消刚刚完成的工作的最佳方法是什么？我知道我可以使用$(window).resize()，但我不确定如何还原更改？

任何帮助或指导都会很棒。

Answer 1

我不会这样做。我会一直在页面中包含这些元素，并在所有小窗口元素中添加类似“narrow”的类。然后，在我的CSS中：

@media screen and (min-width:600px) {
  .narrow {
    display: none;
  }
}

将它们隐藏在更宽的窗口中。

Answer 2

一种方式：

在您的其他情况下插入此代码

    $('.slideshow-float-right").next('.btn-ar.view-gallery').remove();
    $('.col55').next('.col45').remove();
    $('.main-slide').find('.slide-left').remove();
    $('.main-slide').find('.slide-right').remove();

否则

添加元素时，为这些元素添加一个唯一的类，例如smallScreen

然后在其他情况下：

if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {
               $(".smallScreen").remove();
        };

Answer 3

试试这个。你必须将所有类存储在一个数组中。这里我存储了示例类..u需要存储的附加类

 var addedClass = new Array('btn-ar.view-gallery', 'col45', 'btn-ar.view-gallery', 'slide-right');


        if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {

            for (var i in addedClass) {
                $("." + addedClass[i]).remove();
            }
        };

Answer 4

AFAIK没有神奇的方法来恢复对DOM元素顺序的更改（因为我假设页面加载），因为它们的原始位置没有存储...

您可以手动存储每个元素的原始位置，或尝试使用此方法进行简单的修复：

var original_html = '';

if ($(window).width() < 600) {
    if (!original_html)
        original_html = $("body").html();
    //Do your manipulation
} else {
    //Restore everything
    if (original_html)
        $("body").html(original_html);
};

使用jQuery撤消所有附加的HTML

4 个答案: