我有一个 JSON，存储在一个名为PhotographersInfo的变量中，我从那里获取数据，但我想要做的是：我想显示与每个摄影师对应的标签，并 为每个摄影师提供一个边框！就像这张照片一样结果 - 照片我使用模板文字来显示 HTML 中的信息，目前我正在使用 join() 方法将元素转换为字符串，但如何为每个 TAG 提供边框？这是我的代码：photographersInfo.forEach((item) => { const photographersDiv = document.getElementById('container'); const div = document.createElement("div"); photographersDiv.appendChild(div); div.innerHTML = ` <div class="photographerContainer"> <div class="portraitBox"> <img src="${item.portrait}" alt="photo"> </div> <h1 class="name">${item.name}</h1> <p class="city">${item.city}, ${item.country}</p> <p class="tagline">${item.tagline}</p> <p class="price">${item.price}€/jour</p> <p class="tags">${item.tags.join(" ")}</p> </div> ` });这是我的 JSON 数据：let photographersInfo = [ { "name": "Mimi Keel", "id": 243, "city": "London", "country": "UK", "tags": ["#portrait", "#events", "#travel", "#animals"], "tagline": "Voir le beau dans le quotidien", "price": 400, "portrait": "/Photos/Portrait/MimiKeel.jpg" }, { "name": "Ellie-Rose Wilkens", "id": 930, "city": "Paris", "country": "France", "tags": ["#sports", "#architecture"], "tagline": "Capturer des compositions complexes", "price": 250, "portrait": "/Photos/Portrait/EllieRoseWilkens.jpg" }, { "name": "Tracy Galindo", "id": 82, "city": "Montreal", "country": "Canada", "tags": ["#art", "#fashion", "#events"], "tagline": "Photographe freelance", "price": 500, "portrait": "/Photos/Portrait/TracyGalindo.jpg" }, { "name": "Nabeel Bradford", "id": 527, "city": "Mexico City", "country": "Mexico", "tags": ["#travel", "#portrait"], "tagline": "Toujours aller de l'avant", "price": 350, "portrait": "/Photos/Portrait/NabeelBrandford.jpg" },
1 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
使用地图：
${item.tags.map(d => `<span class="tag">${d}</span>`).join(" ")}
其中 css 可能类似于：
.tag {
border: 1px solid lightgray;
border-radius: 20px;
padding: 5px;
}
添加回答
举报
0/150
提交
取消