使用Javascript和jQuery选择要使用变量名进行搜索的数组/对象

Question

I'm a total beginner with JavaScript. I have code that randomly picks an item from an object and now I'd like to randomly pick an item from an object that shares the name as whatever was picked in the first round of generation. I'm not sure how to use a variable name in a selector, especially if that variable name is itself, uh, variable!

Right now I'm getting "undefined" for pizzaFirstChoice.option. I'd like to be getting either "extra sausage", "extra pepperoni", etc, as .option if "meatlover" is picked from "pizzaStyles" and either "extra mushroom", "extra onion", etc, if "veggielover" is picked from "pizzaStyles". The code is successfully generating and displaying .size and .style.

I feel like I'm doing an awful job at describing this, but hopefully you can see what I'm after by looking at the code.

function generate() {

var pizzaFirstChoice = {
size: "",
style: "",
option: "",
};

var pizzaSizes = [
"small",
"medium",
"large",
];

var pizzaStyles = [
"meatlover",
"veggielover",
];

var meatlover = [
"extra sausage",
"extra pepperoni",
"extra bacon",
];

var veggielover = [
"extra mushroom",
"extra onion",
"extra bell pepper",
];

pizzaFirstChoice.size = pizzaSizes[Math.floor(Math.random()*pizzaSizes.length)];
pizzaFirstChoice.style = pizzaStyles[Math.floor(Math.random()*pizzaStyles.length)];
pizzaFirstChoice.option = pizzaFirstChoice.style[Math.floor(Math.random()*pizzaFirstChoice.style)];

var pizza = $("#result").html("His first choice of pizza is a " + pizzaFirstChoice.size + " " + pizzaFirstChoice.style + " with " + pizzaFirstChoice.option + ".");

}

Answer 1

You can define meatlover and veggielover as properties of an object; use bracket notation to reference pizzaFirstChoice.style as property of object with [Math.floor(Math.random() * pizzaOptions[pizzaFirstChoice.style].length)] to adjacent right to reference .length of the selected array.

 function generate() { var pizzaFirstChoice = { size: "", style: "", option: "", }; var pizzaSizes = [ "small", "medium", "large", ]; var pizzaStyles = [ "meatlover", "veggielover", ]; // define `meatlover`, `veggielover` arrays as properties of an object var pizzaOptions = { meatlover: [ "extra sausage", "extra pepperoni", "extra bacon", ] , veggielover: [ "extra mushroom", "extra onion", "extra bell pepper", ] }; pizzaFirstChoice.size = pizzaSizes[Math.floor(Math.random() * pizzaSizes.length)]; pizzaFirstChoice.style = pizzaStyles[Math.floor(Math.random() * pizzaStyles.length)]; pizzaFirstChoice.option = pizzaOptions[pizzaFirstChoice.style][Math.floor(Math.random() * pizzaOptions[pizzaFirstChoice.style].length)]; var pizza = $("#result").html("His first choice of pizza is a " + pizzaFirstChoice.size + " " + pizzaFirstChoice.style + " with " + pizzaFirstChoice.option + "."); } generate(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result"></div> 

Answer 2

if you input console.log after each pizzaFirstChoice.. you will see tha first and second wil give you an answer: medium veggielover, and the third one will be undefined. However you are multiplying string pizzaFirstChoice.style with Math.random() - of course it is undefined. the question is what do you want to be pizzaFirstChoice.option - in the same way you can query array length for meatlover and for veggie lover: pizzaFirstChoice.option = meatlover[Math.floor(Math.random()*meatlover.length)]; or pizzaFirstChoice.option = veggielover[Math.floor(Math.random()*veggielover.length)];

I think that i get correctly what you are after. if not - please explain what is the desired output

Answer 3

Try a conditional:

function generate() {

var pizzaFirstChoice = {
size: "",
style: "",
option: "",
};

var pizzaSizes = [
"small",
"medium",
"large",
];

var pizzaStyles = [
"meatlover",
"veggielover",
];

var meatlover = [
"extra sausage",
"extra pepperoni",
"extra bacon",
];

var veggielover = [
"extra mushroom",
"extra onion",
"extra bell pepper",
];

pizzaFirstChoice.size = pizzaSizes[Math.floor(Math.random()*pizzaSizes.length)];
pizzaFirstChoice.style = pizzaStyles[Math.floor(Math.random()*pizzaStyles.length)];

if (pizzaFirstChoice.style == 'meatlover') {
    pizzaFirstChoice.option = meatlover[Math.floor(Math.random()*meatlover.length)];
} else if (pizzaFirstChoice.style == 'veggielover') {
    pizzaFirstChoice.option = veggielover[Math.floor(Math.random()*veggielover.length)];
}

$("#result").html("His first choice of pizza is a " + pizzaFirstChoice.size + " " + pizzaFirstChoice.style + " with " + pizzaFirstChoice.option + ".");
}