Question

我有一个变量(initW)，它取一些div的初始宽度（wrps）。

有一个侧面板折叠 - 展开事件。

崩溃时，主（中心）div（.p_ext_width）变得更宽。我使用它的新宽度值来设置包装器div的宽度（wrps）。

然后在侧面板展开 - 我希望它们（wrps）回到它们的初始值（initW）。

但是，此变量（initW）现在被新值（扩展宽度）覆盖。

如何保留原始变量值？

function expand_collapse() {
    out=document.querySelector('.p_ext_width')  
    wrps=document.getElementsByClassName('page_wrapper');

    var initW=window.getComputedStyle(wrps[0], null).getPropertyValue("width"); //get width before expanding
    console.log(initW);
    initW1=initW

    if (x.className!="collapseme") {
        //......
        function functionOne(x) {
        var W=window.getComputedStyle(x, null).getPropertyValue("width"); 
//get width after expanding
            for (e=0;e<wrps.length;e++){
                wrps[e].style.width=W;
                }
            }
        function functionTwo(var1, callback) {
            var timer = setTimeout(function() {
            callback(var1);
            }, 500);
        }
        functionTwo(out, functionOne);
        return;
    }
    else {
        for (e=0;e<wrps.length;e++){
            wrps[e].style.width=initW; //set back to initial width 
            console.log("new: " + initW1);
        }
    }
}

Answer 1

这里的问题是变量范围，您需要使用 initW 作为全局变量，并将宽度设置为展开状态。

//get the original width when in expended. 
var initW = window.getComputedStyle(document.getElementsByClassName('page_wrapper')[0], null).getPropertyValue("width");

function expand_collapse() {
    out=document.querySelector('.p_ext_width')  
    wrps=document.getElementsByClassName('page_wrapper');

    if (x.className!="collapseme") {
        //......
        function functionOne(x) {
        var W=window.getComputedStyle(x, null).getPropertyValue("width"); 
//get width after expanding
            for (e=0;e<wrps.length;e++){
                wrps[e].style.width=W;
                }
            }
        function functionTwo(var1, callback) {
            var timer = setTimeout(function() {
            callback(var1);
            }, 500);
        }
        functionTwo(out, functionOne);
        return;
    }
    else {
        for (e=0;e<wrps.length;e++){
            wrps[e].style.width=initW; //set back to initial width 
        }
    }
}

如果调用 expand_collapse 来恢复原始宽度，则会找到折叠的 wrps divs widths 并将相同的宽度分配回wrps。相反，您应该在展开状态下指定wrps div的原始宽度。

Answer 2

我将采取不同的方法。如果我需要这样的东西，那么我第一次搜索自定义属性（我将创建）可能被命名为iniw所需的DOM。然后每次我将搜索属性iniw，如果它被设置，那么我将使用该值作为该DOM的初始值，计算当时的初始值并将该值存储在提到的属性中。这里的初始值意味着您将被视为初始的状态，它可能是任何东西。它只是一种方法，如果您需要代码，请解释一下您目前的代码尝试做什么并提供html代码段

在Javascript中保留初始变量值

2 个答案: