Question

我想保存我的Element的初始状态（包含所有子节点），之后执行一些操作（初始化滚动条插件），在窗口调整大小事件之后，我想将这些更改的值清除为保存的“纯”元素，之后重新初始化滚动条插件（我只想做一个响应不同视图的滚动条元素）。

我尝试使用.cloneNode(true), jquery.clone(true) and jquery.replaceWith()但它对我不起作用因为这些方法以某种方式保留了之前完成的所有chages。所以我无法获得保存的初始HTML。我应该使用outerHTML吗？谢谢你的帮助。

var GLOBAL_rawScrollBarNode;
var GLOBAL_scrollBarParent;

$(document).ready(function($){
      GLOBAL_rawScrollBarNode = $('#scrollbar3').clone();

      GLOBAL_scrollBarParent = $('.portfolio-scroll-box')[0];



      portfolioScrollbarOfDeviceWidth();

    $(window).resize(function(){ 
        portfolioScrollbarOfDeviceWidth();
});



function portfolioScrollbarOfDeviceWidth() {
    var documentWidth = document.documentElement.clientWidth;

    //GLOBAL_scrollBarParent.removeChild(document.getElementById('scrollbar3'));
    //GLOBAL_scrollBarParent.appendChild(GLOBAL_rawScrollBarNode);

    GLOBAL_scrollBarParent.replaceWith(GLOBAL_rawScrollBarNode[0])


    var $scrollBarEl = $('#scrollbar3');

    setTimeout(() => {
        if (documentWidth < 942) {
            console.log("XXX")
            var bar = $scrollBarEl.tinyscrollbar({ axis: 'x',sizethumb: 135 });
            console.log(bar);
        } else {
            console.log("YYY")
            var bar = $scrollBarEl.tinyscrollbar({ axis: 'y',sizethumb: 135 });
            console.log(bar);
        }
    }, 2000)

}

P.S。如果是保存的ELEMENT的outerHTML，之后将它像innerHTML一样分配给它的父级 - 它工作正常。但我想知道如何以其他更优雅的方式解决这个问题：）

在一些DOM模拟（原生js）之后重置元素的初始状态

0 个答案: