javascript - 组合来自不同变量的数组以随机填充 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>