时间戳

首页 > 解决方案 > 如何修复 Javascript 中的代码以避免 HTML 中的重复元素？

javascript - 如何修复 Javascript 中的代码以避免 HTML 中的重复元素？

问题描述

索引.html

 <!--FIRST PIZZA---FIRST CHUNK OF HTML CODE-->
        <div class="column-pizza-1">
          <a href="">
            <div class="pizza-item--img">
              <img src="" id="pizza-img-1" />
            </div>
            <div class="pizza-item--add" id="selected-1">Add</div>
          </a>
          <div class="pizza-item--price" id="pizza-price-1">Rs. --</div>
          <div class="pizza-item--name" id="pizza-name-1">--</div>
          <div class="pizza-item--desc" id="pizza-desc-1">--</div>
        </div>
<!--SECOND PIZZA---SECOND CHUNK OF HTML CODE-->
            <div class="column-pizza-2">
              <a href="">
                <div class="pizza-item--img">
                  <img src="" id="pizza-img-2" />
                </div>
                <div class="pizza-item--add" id="selected-2">Add</div>
              </a>
              <div class="pizza-item--price" id="pizza-price-2">Rs. --</div>
              <div class="pizza-item--name" id="pizza-name-2">--</div>
              <div class="pizza-item--desc" id="pizza-desc-2">--</div>
              <div class="pizza-item--sizes" id="pizza-size-2">
            </div>

比萨饼.json

[
  {
    "id": 1,
    "name": "Tandoori Paneer",
    "img": "/images/pizza.png",
    "price": 200,
    "sizes": [0, 100, 200],
    "description": "Spiced paneer, Onion, Green Capsicum & Red Paprika in Tandoori Sauce",
    "cheese": [0, 100, 0]
  },
  {
    "id": 2,
    "name": "Veggie Supreme",
    "img": "images/pizza.png",
    "price": 250,
    "sizes": [0, 100, 200],
    "description": "Black Olives, Green Capsicum, Mushroom, Onion, Red Paprika, Sweet Corn",
    "cheese": [0, 100, 0]
  }
]

index.js

//FIRST PIZZA - loading json data and showing it on index.html page
fetch("pizzas.json").then((response) =>
  response.json().then((data) => {
    //console.log(data[0].name);
    document.querySelector("#pizza-img-1").src = data[0].img;
    document.querySelector("#pizza-name-1").innerHTML = data[0].name;
    document.querySelector(
      "#pizza-price-1"
    ).innerHTML = `Rs ${data[0].price.toFixed(2)}`;
    document.querySelector("#pizza-desc-1").innerHTML = data[0].description;
  })
);
//SECOND PIZZA
fetch("pizzas.json").then((response) =>
  response.json().then((data) => {
    //console.log(data[0].name);
    document.querySelector("#pizza-img-2").src = data[1].img;
    document.querySelector("#pizza-name-2").innerHTML = data[1].name;
    document.querySelector(
      "#pizza-price-2"
    ).innerHTML = `Rs ${data[1].price.toFixed(2)}`;
    document.querySelector("#pizza-desc-2").innerHTML = data[1].description;
  })
);

我的疑问：
正如您在上面的代码中看到的，我想显示两个披萨项目的详细信息，其详细信息存储在 json 文件中，并且我正在使用 vanilla javascript 将数据从 json 加载到 HTML。对于每个比萨饼，我都在 index.html 中创建了不好的元素。假设将来我想显示 50 个比萨饼的详细信息，这意味着在 html 中创建 50 块代码。
有人可以告诉我如何只使用一段 HTML 代码并多次使用它来使用 vanilla javascript 创建尽可能多的披萨项目。

我的看法：
我正在考虑将 json 数据存储为全局变量，然后使用onload()和ready()加载数据，但我不知道该怎么做。

标签： javascripthtmljsonfrontend

解决方案

您可以在 JavaScript 中创建一个 HTML 模板，并使用它来<div>根据 JSON 文件中的数据生成多个。

使用模板文字，您可以轻松地与循环一起使用

fetch("https://api.jsonbin.io/b/605b2c5aaee69516ee8a8866/2").then((response) =>
  response.json().then((data) => {

    let jsonSize = data.length;

    let htmlContent = '';
    for (let i = 0; i < jsonSize; i++) {
      let id = data[i].id;
      let name = data[i].name;
      let img = data[i].img;
      let price = data[i].price;
      let sizes = data[i].sizes;
      let description = data[i].description;
      let cheese = data[i].cheese;

      htmlContent += `
           <div class="column-pizza">
            <a href="">
              <div class="pizza-item--img">
                <img src="${img}" id="pizza-img-${i}" />
              </div>
              <div class="pizza-item--add" id="selected-${i}">Add</div>
            </a>
            <div class="pizza-item--price" id="pizza-price-${i}">₹${price}</div>
            <div class="pizza-item--name" id="pizza-name-${i}">${name}</div>
  <div class="pizza-item--desc" id="pizza-desc-${i}">${description}</div>
</div>`;
    }
    document.querySelector("#root").innerHTML = htmlContent;

  })
);
.column-pizza {
  height: auto;
  width: 50vv;
}


.pizza-item--add,
.pizza-item--price {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.pizza-item--add {
  background-color: #4CAF50;
  /* Green */
}

.pizza-item--price {
  background-color: #333;
  /* Gray */
}
<div id="root"></div>

PS-没有比萨图像占位符，因此使用一些随机和️图像。

推荐阅读