我想保存我的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一样分配给它的父级 - 它工作正常。但我想知道如何以其他更优雅的方式解决这个问题:)