JavaScript getElementById 你能在括号内获得多少创意？

Question

我正在做一个小项目来提高我的 js 技能，但我目前处于停滞状态。

如果您在下面的 getElementById 处查看我的代码(不起作用)，在括号内我正在尝试获取单词大小并将其与变量值(值包含用户选择的选项值)组合。因此，例如它将是 getElementById(size28[i])，但是 28 当然会发生变化。

所以我想我的问题是，无论如何我可以做到这一点吗？

var allSizes = new Array(28,30,32);
var size28 = new Array("tgp_0", "tgp_1", "tgp_2", "tgp_3");
var size30 = new Array("tgp_0", "tgp_1", "tgp_2");
var size32 = new Array("tgp_0", "tgp_1", "tgp_2");

var index = document.rightAngle.ddHP.selectedIndex;
var value = document.rightAngle.ddHP.options[index].value;

for (var i=0; i<allSizes.length; i++) {
    if (value == allSizes[i]) {
        var s = "size";
        for (var j=0; j<6; j++) {
            document.getElementById(s+value+[j]).style.display = 'block';
        }
    }
}

然后是 HTML 部分:

<select name="ddHP">
 <option value="28">28</option>
 <option value="30">30</option>
 <option value="32">32</option>
</select>

<div id="tgp_0" class="idiv"><h1>Item 0</h1></div>
<div id="tgp_1" class="idiv"><h1>Item 1</h1></div>  
<div id="tgp_2" class="idiv"><h1>Item 2</h1></div>
<div id="tgp_3" class="idiv"><h1>Item 3</h1></div>  

Answer 1

你不能通过名称作为字符串来引用变量(好吧，你可以使用一个叫做 eval 的东西，或者我想通过 window["nameOfVariable"]，但这真的很乱，根本不值得推荐)。我建议将所有 size 数组放在另一个数组中，或者更好的是，一个对象字面量。

像这样:

var sizes = {
  "28": new Array("tgp_0", "tgp_1", "tgp_2", "tgp_3"),
  "30": new Array("tgp_0", "tgp_1", "tgp_2"),
  "32": new Array("tgp_0", "tgp_1", "tgp_2")
};

现在，以编程方式引用任何特定大小的数组要容易得多。不必获取名为“size28”的确切变量，您只需引用 sizes["28"](如果您愿意，可以将这些键更改为整数而不是字符串；不会真的很重要)。

现在，您只需检查value 是否存在于sizes 对象中，如果存在则执行您的CSS 修改操作:

var index = document.rightAngle.ddHP.selectedIndex;
var value = document.rightAngle.ddHP.options[index].value;

// check if this value exists in the sizes array
// (edit: actually, this check is kind of redundant since you know the <select> tag only contains options "28", "30", and "32". you don't need this IF statement)
if (typeof sizes[value] !== 'undefined') {
    for (var j=0; j<6; j++) {
        document.getElementById(sizes[value][j]).style.display = 'block';
    }
}