Question

我正在尝试重新创建“今日特别”菜单，这样每次刷新页面时，都会填充不同类型的比萨饼，但阵列中的属性正确。所以0索引数据都属于一起，1索引属于一起，等等。这是我尝试过的代码，但它从任何随机变量中随机填充。请帮忙。

我希望它看起来像：“今日特价：pizzaName +价格+描述”

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

您可以构建包含对象的数组

[
    {
        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!"
    }
]

并随意选择。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您应该将披萨属性存储在每个披萨的一个对象中，而不是分布在不同的阵列上。当您使用不同的结构时，事情变得更加容易：

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 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)];

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

4 个答案: