JavaScript getElementById如何在括号内获得创意？

Question

I'm working on a little project to improve my js skills and I'm currently at a standstill.

If you look at my code below (doesn't work) at getElementById, inside the parenthesis I'm trying to get the word size and combined it with the variable value (value contains the option value the user selected). So for example it would be getElementById(size28[i]), but that 28 changes of course.

So I guess my question is, is there anyway that I can do that?

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';
        }
    }
}

Then the HTML portion:

<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

You can't reference a variable by its name as a string (well, you can using a thing called eval , or I suppose by doing window["nameOfVariable"] , but that's really messy and not recommendable at all). I would recommend putting all your size arrays in another array, or better yet, an object literal.

Like so:

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")
};

Now, it's much easier to programmatically reference any particular size array. Instead of having to get the exact variable named "size28", you can just refer to sizes["28"] (you can change those keys to be integers instead of strings if you prefer; doesn't matter really).

So now, you just check if value exists in the sizes object, and perform your CSS-modifying operation if it does exist:

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';
    }
}

Answer 2

Store those variables in an object and you can use bracket/string notation to pull what you need:

var allSizes = new Array(28,30,32);
var sizeGroups = {
    size28 : ["tgp_0", "tgp_1", "tgp_2", "tgp_3"],
    size30 : ["tgp_0", "tgp_1", "tgp_2"],
    size32 : ["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(sizeGroups[s+value][j]).style.display = 'block';
        }
    }
}