时间戳

首页 > 解决方案 > 如何：“使用 JavaScript for 循环更新数组中的值”

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

问题描述

我正在创建一个网页，我想在其上隐藏/显示某些 div。为此，我创建了一个 for 循环来将 style.display 更改为noneor 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 = [];
    }
}

标签： javascriptarrays

解决方案

您array1在ifandelse块中声明了一个新变量。您在其中声明的这个变量的范围仅限于声明它的相应块。
相反，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 = [];
    }
}

差异： 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>

推荐阅读