javascript - 使用 javascript 和 html 构建动态产品列表

Question

我不想像下面的 html 页面那样手动输入每个产品的信息，而是想为我的每组数据动态构建 div(每行 3 个):pastryData ，咖啡数据。

然后在每个图像上都有一个链接，当用户单击该链接时，会将他重定向到包含特定项目描述的产品页面。

我有以下products.html页面:

<div class="container">
    <div id="pastries">
        <h3>Pastries</h3>
        <div class="card">
            <img src="images/croissant.png" alt="croisant" style="width:100%">
            <p class="calories">200 calories</p>
            <p class="name">Croissant</p>
        </div>                  
    </div>

    <div id="coffee">                   
       <h3>Coffee</h3>
    </div>
</div>
...
<script src="js/products.js" type="text/javascript"></script>   
</body>

这是我的products.js文件:

    var pastryData = [
       { 
        itemID: "1", 
        itemName: "Croissant", 
        itemDesc: "Light, airy and shatteringly crisp, with a deeply caramelized buttery flavor, these croissants are a labor of love that's absolutely worth the time.", 
        calories: "200", 
        price: 1.99, 
        image: "../images/croissant.png"
        },
       { 
        itemID: "2", 
        itemName: "Cinnamon-Date Buns", 
        itemDesc: "These delicious cinnamon buns are infused with puréed dates", 
        calories: "300", 
        price: 2.14, 
        image: "../images/cinnamon-date-buns.jpg"
        },
       { 
        itemID: "3", 
        itemName: "Savory Fondue Babka", 
        itemDesc: "This cheesy loaf goodness has an amazing flavor of foundue.", 
        calories: "320", 
        price: 2.32, 
        image: "../images/fondue-babka.jpg"
        },
       { 
        itemID: "4", 
        itemName: "Quinoa-Banana Muffins", 
        itemDesc: "Quinoa had never tasted better than in this flavorful muffin.", 
        calories: "330", 
        price: 1.78, 
        image: "../images/Quinoa-Banana-Muffins.jpg"
        },
    ];

    var coffeeData = [
       { 
        itemID: "9", 
        itemName: "Cappuccino", 
        itemDesc: "Cappuccino", 
        calories: "150", 
        price: 2.89, 
        image: "../images/Cappuccino.jpg"}
        },
       { 
        itemID: "10", 
        itemName: "Latte", 
        itemDesc: "Latte", 
        calories: "100", 
        price: 2.33, 
        image: "../images/latte.jpg"}
        },
       { 
        itemID: "11", 
        itemName: "Caffe Americano", 
        itemDesc: "Caffe Americano", 
        calories: "250", 
        price: 1.50, 
        image: "../images/caffe-americano.jpg"}
        },
       { 
        itemID: "12", 
        itemName: "Regular Coffee", 
        itemDesc: "Regular Coffee", 
        calories: "0", 
        price: 0.99, 
        image: "../images/coffee.jpg"}
        },
    ];

    function buildData(data, idName) {
  for (var prop of data) {
        var imageElem = document.createElement("img");
        imageElem.setAttribute("src", prop.image);
        imageElem.setAttribute("width", "100%");        
        imageElem.setAttribute("alt", prop.itemName);

        var paramCalories = document.createElement("p");
        paramCalories.className = "calories"
        paramCalories.innerText = prop.calories + " calories";

        var paramName = document.createElement("p");
        paramName.className = "name"
        paramName.innerText = prop.itemName;

        var cell = document.createElement("div");
        cell.className = "card";
        cell.appendChild(imageElem);
        cell.appendChild(paramCalories);
        cell.appendChild(paramName);

        document.getElementById(idName).appendChild(cell);
  }
}

这就是我到目前为止所拥有的全部内容，但我不确定如何实际完成这项工作。

产品.css

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.calories {
  color: grey;
  font-size: 18px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;  
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.card .left {
    float: left;
}

.card .name {
  color: brown;
  font-size: 24px;
}

Answer 1

我不会给你做作业，但你需要研究一下字符串插值。 ES6 使用模板字符串文字使这变得很容易，但我猜你必须在学校使用 ES5(因为你的示例代码不使用 ES6)。
您可以在这里获得一些灵感:How can I do string interpolation in JavaScript?

理论上你会:

• 创建一个采用插值(您的 json 值)的函数，并为单个 json 对象返回完全生成的 html 字符串。如果需要，您可以使用简单的字符串连接；
• 循环遍历 JavaScript 值数组并为每个项目调用函数。将每个项目返回的 html 连接到一个列表中；
• 对 DOM 执行单次写回(就像您在示例中所做的那样，例如使用 innerHTML)。