gpt4 book ai didi

javascript - 如何让我的 JavaScript 迭代到 HTML 中的新行?

转载 作者:行者123 更新时间:2023-11-30 10:59:24 25 4
gpt4 key购买 nike

我有两个文件:grocery.js 和 grocery.html。

我在 JavaScript 中创建了一个数组,其中包含多个“杂货 list 项”对象。目前,每个项目在每次迭代时都会替换先前的项目。如何修复代码,使其在我的 Web 浏览器中以新行打印每个购物项目?

我试过几种“\n”和“
”的组合。

杂货店.html

<!DOCTYPE html>
<html>
<head><title>Grocery List</title></head>
<body>
<script src="grocery.js"></script>
</body>
</html>

杂货店.js

var Grocery = /** @class */ (function () {
function Grocery(name, quantity, groceryType) {
this.name = name;
this.quantity = quantity;
this.groceryType = groceryType;
}
return Grocery;
}());
function listPrinter(listItems) {
return listItems.groceryType + ": " + listItems.name + " - " + listItems.quantity;
}

var item_1 = new Grocery("Apples", "14", "Fruit");
var item_2 = new Grocery("Cookies", "3", "Dessert");
var item_3 = new Grocery("Broccoli", "5", "Vegetable");

var groceryList = [item_1, item_2, item_3];

for (var _i = 0, groceryList_1 = groceryList; _i < groceryList_1.length; _i++) {
var item = groceryList_1[_i];
document.body.textContent = listPrinter(item);
}

最佳答案

你有一个列表。使用适当的 HTML 元素,一个有序列表 ( ul ) 和列表项 ( li )。列表列表项 ( li ) 默认是一个 block 元素,因此每个元素都在一个新的“行”上。

我们将使用 template literal让我们的生活更轻松

在 Brad 的完全有效评论之后,我们将使用 document fragment管理我们的列表项。

function Grocery(name, quantity, groceryType) {
this.name = name;
this.quantity = quantity;
this.groceryType = groceryType;
}


var item_1 = new Grocery("Apples", "14", "Fruit");
var item_2 = new Grocery("Cookies", "3", "Dessert");
var item_3 = new Grocery("Broccoli", "5", "Vegetable");

var groceryList = [item_1, item_2, item_3];
var fragment = document.createDocumentFragment()
//Iterate the array
groceryList.forEach(function(item) {
//Create a list item
var li = document.createElement('li');
//Set boilerplate inner html
li.innerHTML = "<span class='item'></span> - <span class='quantity'></span><span class='category'></span>"
//Add it to our fragment
fragment.appendChild(li);
//Update the values
li.querySelector(".item").innerText = item.name;
li.querySelector(".quantity").innerText = item.quantity;
li.querySelector(".category").innerText = item.groceryType;

//For fun lets add a class to list item based on type
li.classList.add(item.groceryType);

});

//Update the list element once
document.getElementById("groceryList").appendChild(fragment)
#groceryList {
list-style: none;
padding-left: 0;
}

#groceryList li {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: solid 1px black;
}

.item {
font-weight: bold;
}

.category {
display: block;
font-size: 0.75em;
color: #CCC;
text-align: right;
}

.Fruit {background-color: #FEE;}
.Vegetable {background-color: #EFE;}
.Dessert {background-color: #FFE;}
<ul id="groceryList"></ul>

通过使用像列表这样的语义元素,您可以使用 CSS 根据需要设置不同的样式。你失去了这个能力 <br> .下面唯一改变的是 CSS:

function Grocery(name, quantity, groceryType) {
this.name = name;
this.quantity = quantity;
this.groceryType = groceryType;
}


var item_1 = new Grocery("Apples", "14", "Fruit");
var item_2 = new Grocery("Cookies", "3", "Dessert");
var item_3 = new Grocery("Broccoli", "5", "Vegetable");

var groceryList = [item_1, item_2, item_3];
var fragment = document.createDocumentFragment()
//Iterate the array
groceryList.forEach(function(item) {
//Create a list item
var li = document.createElement('li');
//Set blank inner html
li.innerHTML = "<span class='item'></span> - <span class='quantity'></span><span class='category'></span>"
//Add it to our fragment
fragment.appendChild(li);
//Update the values
li.querySelector(".item").innerText = item.name;
li.querySelector(".quantity").innerText = item.quantity;
li.querySelector(".category").innerText = item.groceryType;

//For fun lets add a class to list item based on type
li.classList.add(item.groceryType);

});

//Update the list element once
document.getElementById("groceryList").appendChild(fragment)
#groceryList {
list-style: none;
padding-left: 0;
display: flex;
justify-content: space-evenly;
}

#groceryList li {
margin-bottom: 0.5em;
padding: 0.5em;
border: solid 1px black;
width: 25%;
position: relative;
padding-left: 2em;
}

#groceryList li:before {
position: absolute;
top: 5px;
left: 2px;
}

.item {
font-weight: bold;
}

.category {
display: block;
font-size: 0.75em;
color: #CCC;
}

.Fruit:before {
content: '🍏';
}

.Vegetable:before {
content: '🌽';
}

.Dessert:before {
content: '🍨';
}
<ul id="groceryList"></ul>

关于javascript - 如何让我的 JavaScript 迭代到 HTML 中的新行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58531751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com