第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

將數(shù)組內的對象值顯示為 HTML

將數(shù)組內的對象值顯示為 HTML

偶然的你 2021-10-29 13:44:23
我創(chuàng)建了一個對象數(shù)組：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 代碼：
查看完整描述

3 回答

?
撒科打諢

TA貢獻1934條經驗 獲得超2個贊

所以我不確定你想要做什么，但看看這是否有幫助。這就是我對我認為您正在努力實現(xiàn)的目標的看法：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/bootstrap.min.css">

      <meta name="viewport" content="width=device-width, user-scalable=no">

        <link rel="stylesheet" href="css/style.css">

        <title>Vini Game Store</title>

    </head>

    <body>

        <h1>Games</h1>

    <div id = "game1"></br>

    <div id = "game2"></br>

    <div id = "game3">


    <script>

    let games = [];//array goes here


    var game1 = document.getElementById('game1');

    var game2 = document.getElementById('game2');

    var game3 = document.getElementById('game3');


    game1.innerHTML = games[0].title + ', price:' + games[0].price;

    game2.innerHTML = games[1].title + ', price:' + games[1].price;

    game3.innerHTML = games[2].title + ', price:' + games[2].price;

    </script>

    </body> 

</html>


查看完整回答
反對 回復 2021-10-29
?
桃花長相依

TA貢獻1860條經驗 獲得超8個贊

我將使用我通常會做的簡化版本，因為我覺得您是 javascript 新手。


我很喜歡將 HTML 和 javascript 分開。通常我會在 HTML 中創(chuàng)建一個模板，克隆它并使用它。我通常也會使用文檔片段，所以我只會更新一次 DOM。


為了保持簡單，我將使用模板文字并跳過文檔片段


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

  }

];


function buildGames(parent, games) {

  var html = "";

  games.forEach(function(game) {

    //Set Our Itemp template

    let itemTemplate = `

  <li>

     <h2>${game.title}</h2>

     <div class="price">Price: $ ${game.price}</div>

     <img src="${game.img}" alt="Image of ${game.title}" />

  </li>`;

    //update the html 

    html += itemTemplate

  });

  //Update the parent once

  parent.innerHTML += html;

}


buildGames(document.getElementById("gamesList"), games);

#gamesList {

  list-style: none;

  padding-left: 0;

}


#gamesList li {

  width: 200px;

  display: inline-block;

  border-radius: 15px;

  box-shadow: 2px 2px 4px #333;

  margin-right: 5px;

  margin-top: 8px;

  padding:10px;

}

<h1>Games</h1>

<ul id="gamesList">

</ul>


查看完整回答
反對 回復 2021-10-29
  • 3 回答
  • 0 關注
  • 222 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號