将数组内的对象值显示为 HTML

我创建了一个对象数组:


let games = [{

    title: 'God of War',

    price: 50,

    img: "./assets/images/God-of-War.jpg"

  },

  {

    title: 'Death Stranding',

    price: 70,

    img: "./assets/images/Death-Stranding.jpg"

  },

  {

    title: 'The Last Of Us 2',

    price: 40,

    img: "./assets/images/The-Last-Of-Us-2.jpg"

  }

];

<h1>Games</h1>

<div>

  <div>

    <h2>

      <script>

        games[0].title

      </script>

    </h2>

    <button>Buy</button>

  </div>

</div>


我想像在电子商务网站中一样显示所有这些值,但我无法在我的 HTML 中显示这些值。这是我的 HTML 代码:


偶然的你
浏览 198回答 3
3回答

撒科打诨

所以我不确定你想要做什么,但看看这是否有帮助。这就是我对我认为您正在努力实现的目标的看法:<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="css/bootstrap.min.css">&nbsp; &nbsp; &nbsp; <meta name="viewport" content="width=device-width, user-scalable=no">&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="css/style.css">&nbsp; &nbsp; &nbsp; &nbsp; <title>Vini Game Store</title>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Games</h1>&nbsp; &nbsp; <div id = "game1"></br>&nbsp; &nbsp; <div id = "game2"></br>&nbsp; &nbsp; <div id = "game3">&nbsp; &nbsp; <script>&nbsp; &nbsp; let games = [];//array goes here&nbsp; &nbsp; var game1 = document.getElementById('game1');&nbsp; &nbsp; var game2 = document.getElementById('game2');&nbsp; &nbsp; var game3 = document.getElementById('game3');&nbsp; &nbsp; game1.innerHTML = games[0].title + ', price:' + games[0].price;&nbsp; &nbsp; game2.innerHTML = games[1].title + ', price:' + games[1].price;&nbsp; &nbsp; game3.innerHTML = games[2].title + ', price:' + games[2].price;&nbsp; &nbsp; </script>&nbsp; &nbsp; </body>&nbsp;</html>

桃花长相依

我将使用我通常会做的简化版本,因为我觉得您是 javascript 新手。我很喜欢将 HTML 和 javascript 分开。通常我会在 HTML 中创建一个模板,克隆它并使用它。我通常也会使用文档片段,所以我只会更新一次 DOM。为了保持简单,我将使用模板文字并跳过文档片段var games = [{&nbsp; &nbsp; title: 'God of War',&nbsp; &nbsp; price: 50,&nbsp; &nbsp; img: "./assets/images/God-of-War.jpg"&nbsp; },&nbsp; {&nbsp; &nbsp; title: 'Death Stranding',&nbsp; &nbsp; price: 70,&nbsp; &nbsp; img: "./assets/images/Death-Stranding.jpg"&nbsp; },&nbsp; {&nbsp; &nbsp; title: 'The Last Of Us 2',&nbsp; &nbsp; price: 40,&nbsp; &nbsp; img: "./assets/images/The-Last-Of-Us-2.jpg"&nbsp; }];function buildGames(parent, games) {&nbsp; var html = "";&nbsp; games.forEach(function(game) {&nbsp; &nbsp; //Set Our Itemp template&nbsp; &nbsp; let itemTemplate = `&nbsp; <li>&nbsp; &nbsp; &nbsp;<h2>${game.title}</h2>&nbsp; &nbsp; &nbsp;<div class="price">Price: $ ${game.price}</div>&nbsp; &nbsp; &nbsp;<img src="${game.img}" alt="Image of ${game.title}" />&nbsp; </li>`;&nbsp; &nbsp; //update the html&nbsp;&nbsp; &nbsp; html += itemTemplate&nbsp; });&nbsp; //Update the parent once&nbsp; parent.innerHTML += html;}buildGames(document.getElementById("gamesList"), games);#gamesList {&nbsp; list-style: none;&nbsp; padding-left: 0;}#gamesList li {&nbsp; width: 200px;&nbsp; display: inline-block;&nbsp; border-radius: 15px;&nbsp; box-shadow: 2px 2px 4px #333;&nbsp; margin-right: 5px;&nbsp; margin-top: 8px;&nbsp; padding:10px;}<h1>Games</h1><ul id="gamesList"></ul>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript