Question

我正在创建一个要在其上隐藏/显示某些div的网页。为此，我创建了一个for循环来将style.display更改为none或block。使用相同的for循环，我同时希望更新数组。

当我隐藏div时，数组应该为空。但是当我显示div时，它应该包含[65, 59, 80, 81, 56, 55]下面列出的值。

我的问题是；数组在循环内更新，但不在循环内更新。为什么不在循环外更新数组？

输出应该是一个更新的数组，可以在for循环外使用。

var array1 = [];
function hideRightBlock() {
    var x = document.getElementById("text_box_right");
    if (x.style.display === "none") {
        x.style.display = "block";
        var array1 = [65, 59, 80, 81, 56, 55];
    } else {
        x.style.display = "none";
        var array1 = [];
    }
}

Answer 1

您正在array1和if块内声明一个新变量else。您在其中声明的变量的作用域仅限于在其中声明的相应块。
而是从函数外部修改array1：

var array1 = [];
function hideRightBlock() {
    var x = document.getElementById("text_box_right");
    if (x.style.display === "none") {
        x.style.display = "block";
        array1 = [65, 59, 80, 81, 56, 55];
    } else {
        x.style.display = "none";
        array1 = [];
    }
}

DIFF：：array1 = [...];，而不是var array1 = [...];

可运行的示例

var array1 = [];

function hideRightBlock() {
    var x = document.getElementById("text_box_right");
    if (x.style.display === "none") {
        x.style.display = "block";
        array1 = [65, 59, 80, 81, 56, 55];
    } else {
        x.style.display = "none";
        array1 = [];
    }
    
    //just for displaying array value
    document.getElementById("array-value").innerHTML = JSON.stringify(array1);
}

<div id="text_box_right">THIS IS THE BOX</div>
<button type="button" onclick="hideRightBlock()">toggle</button>
<br/>
<br/>
<div id="array-value"></div>

Answer 2

最好var ...一次初始化变量。但是我认为这不是你的问题。检查元件显示可能是错误的。最好用getComputedStyle检查元素的显示，因为style.display将只知道内联样式元素，而不是外部元素.....

检查下图...

var array1 = [];
function hideRightBlock() {
    var x = document.getElementById("text_box_right");
    var computeStyle = window.getComputedStyle(x);
    if (computeStyle.display === "none") {
        x.style.display = "block";
        var array1 = [65, 59, 80, 81, 56, 55]; // better array1 = [65, 59, 80, 81, 56, 55];
    } else {
        x.style.display = "none";
        var array1 = []; //better array1 = [];
    }
    console.log(array1);
}

#text_box_right {
display: none;
}

<div id="text_box_right" >This is text box right</div>

<button onclick="hideRightBlock()">Show/Hide</button>

如何：“使用JavaScript for循环更新数组中的值”

2 个答案: