如何修复 Javascript 中的代码以避免 HTML 中的重复元素？
Posted
技术标签:
【中文标题】如何修复 Javascript 中的代码以避免 HTML 中的重复元素？【英文标题】：How do I fix the code in Javascript to avoid repetitive elements in HTML? 【发布时间】：2021-06-21 03:21:17 【问题描述】：index.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>
pizzas.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() 加载数据，但我不知道该怎么做。
【问题讨论】：
执行一次请求，遍历作为响应的数组，显示信息。寻找developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ***.com/questions/53967165/… 这应该会有所帮助。另外，请注意，您可以通过 JSON.parse()-API 轻松地将 JSON 解析为普通的 JS 对象。 (developer.mozilla.org/de/docs/Web/JavaScript/Reference/…) 【参考方案1】：您可以在 JavaScript 中创建一个 HTML 模板，并使用它来根据 JSON 文件中的数据生成多个 <div>。
使用Template Literals，您可以轻松地使用loops
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- 没有披萨图片占位符，因此使用一些随机的 ? 和 ?️ 图片。
【讨论】：
谢谢。但是假设我需要显示 50 个披萨项目，那么我将不得不为其创建 50 个 标签，对吗？有什么方法可以让我不必创建这么多 标签，因为我希望应用程序可行。 @NehaChaudhary 在上面的代码中，我使用 JavaScript 创建了 2 个<div> 标签，而不是在 HTML 中硬编码。因此，如果你有 50 甚至任何数字，那么上面的代码也可以在不改变一行代码的情况下工作。
@NehaChaudhary 但是，假设您的 JSON 中有 100 个项目。那么在没有任何分页或无限滚动方法的情况下在单个页面上显示全部 100 个项目并不是一个好方法。为此，我们需要使用 graphQL 或类似的东西，我们将调用 JSON 文件而不是从 DB 获取数据的 API。
非常感谢您的澄清。
@NehaChaudhary 如果有帮助，请接受它作为答案。
【参考方案2】：
这是一个演示
您可以使用 async/await 来获取 json 使用 map 将数组转换为标签 使用innerHTML追加一堆html内容
document.addEventListener('DOMContentLoaded', async ev =>
const res = await fetch('https://jsonplaceholder.typicode.com/photos')
const data = await res.json()
const photos = data.slice(0, 100)
const appEl = document.querySelector('#app')
appEl.innerHTML = photos.map((photo, index) =>
return `<div class="photo" style="transition-delay: $index / 10s">
<div class="image">
<a href="$photo.url"><img src="$photo.thumbnailUrl" /></a>
</div>
<div class="title">
<a href="$photo.url">$photo.title</a>
</div>
</div>`
).join('')
setTimeout(() =>
appEl.classList.add('loaded')
, 0)
, false)#app
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
position: relative;
.photo
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
transform: translate(-100vw, -100vh);
#app.loaded .photo
position: static;
transition: all ease 1s;
transform: translate(0, 0);
.image
text-align: center;
transition: transform ease 1s;
.image:hover
transform: scale(1.1);
.title a
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
display: inline-block;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: midnightblue;
text-decoration: none;
.title a:hover
color: dodgerblue;
<div id="app"></div>【讨论】：
以上是关于如何修复 Javascript 中的代码以避免 HTML 中的重复元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何在使用 javascript fetch 函数时设置公共 Google Cloud Storage 存储桶的 CORS 以避免错误？
需要帮助修复我的javascript“for循环”以播放音频播放列表[重复]
如何避免 Javascript 中的 `this` 和 `new` 关键字？ [关闭]