组合来自不同变量的数组以随机填充 javascript

Question

我正在尝试重新创建一个"今日特别"菜单，以便每次刷新页面时，都会填充不同类型的披萨，但在数组中具有正确的属性。因此，0 个索引数据都属于一起，1 个索引数据属于一起，依此类推。这是我尝试过的代码，但它是从任何随机变量中随机填充的。请帮忙。

我希望它看起来像："今天的特价：披萨名称 + 价格 + 描述">

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM','Conjunction Function'];
var price = [44.44, 22.14, 16.99, 17.02];
var description = ['Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 'This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'];

.HTML：

<section id="today">
  <div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <p id="special">Conditional Love</p>
  </div>
</section>

JavaScript：

function randomPizzaFunction(hungry, hungrier, hungriest){
  for(var i = 0; i<hungry.length; i++){
    var displayTodaysSpecial = hungry.concat(hungrier).concat(hungriest);
    console.log(displayTodaysSpecial[i]);
  }
  return displayTodaysSpecial;
}
randomPizzaFunction(pizzaName, price, description);
var genRandomPizza = randomPizzaFunction(pizzaName, price, description);
console.log(genRandomPizza);
var changeSpecial = document.getElementById("special");
changeSpecial.innerHTML = genRandomPizza[Math.floor(Math.random() * genRandomPizza.length)];

Answer 1

您应该将披萨属性一起存储在每个披萨的一个对象中，而不是分布在不同的数组中。当您使用不同的结构时，事情会变得容易得多：

var pizzas = [{
    name: 'Four Loop',
    price: 44.44,
    description:'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 
},{
    name: 'Conditional Love', 
    price: 22.14,
    description: 'This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 
},{
    name: 'The DOM',
    price: 16.99,
    description: 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!',
},{
    name: 'Conjunction Function',
    price: 17.02,
    description: 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'
}];
function randomPizza(pizzas){
    return pizzas[Math.floor(Math.random() * pizzas.length)];
}
var pizza = randomPizza(pizzas);
document.getElementById("special-name").textContent = pizza.name;
document.getElementById("special-price").textContent = pizza.price;
document.getElementById("special-description").textContent = pizza.description;

<section id="today">
  <div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <div id="special">
        Special: <span id="special-name"></span><br>
        Price: $<span id="special-price"></span><br>
        <span id="special-description"></span>
    </div>
  </div>
</section>

Answer 2

你可以用对象构建一个数组

[
    {
        name: "Four Loop",
        price: 44.44,
        description: "Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!"
    },
    {
        name: "Conditional Love",
        price: 22.14,
        description: "This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!"
    },
    {
        name: "The DOM",
        price: 16.99,
        description: "This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!"
    },
    {
        name: "Conjunction Function",
        price: 17.02,
        description: "Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!"
    }
]

并把它作为随机选择。

然后使用所选比萨饼的属性进行输出。

function getRandomPizza(pizza) {
    return pizza[Math.floor(Math.random() * pizza.length)];
}
var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM', 'Conjunction Function'],
    price = [44.44, 22.14, 16.99, 17.02],
    description = ['Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 'This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'],
    pizza = pizzaName.map(function (a, i) {
        return  { name: a, price: price[i], description: description[i] };
    }),
    randomPizza = getRandomPizza(pizza);
['name', 'price', 'description'].forEach(function (k) {
    document.getElementById(k).innerHTML = randomPizza[k];
});

<div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <h4 id="name"></h4>
    <h4><span id="price"></span> $</h4>
    <p id="description"></p>
</div>

Answer 3

在 html 中，我采用了自由并添加了"名称、价格和描述"的元素以及 id

<section id="today">
<div class="content">
  <h3 class="sectionTitle">Today's Special</h3>
  <h1 id='name'>pizza name</h1>
  <h2 id='price'>price</h2>
  <p id='dec'>description</p>
</div>

你只需要得到一个随机数，然后访问每个数组并分别填充每个元素

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM','Conjunction Function'];
var price = [44.44, 22.14, 16.99, 17.02];
var description = [
  'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 
  'This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 
  'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 
  'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'
];
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}
var rn = getRandomInt(0,3)
document.getElementById('name').innerHTML = pizzaName[rn]
document.getElementById('price').innerHTML = price[rn]
document.getElementById('desc').innerHTML = description[rn]

我假设您在页面末尾有脚本标签..如果不将代码包装在document.ready方法中。

Answer 4

@trincot是正确的，你应该把它存储在对象数组中。喜欢这个

var pizza = [{
    name: 'Four Loop',
    price: 44.44,
    description: 'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!'
}, {
    name: 'Conditional Love',
    price: 22.14,
    description: 'This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!'
}];
var display = pizza[Math.floor(Math.random() * pizza.length)];