如何为嵌套数组元素指定一个类？

Question

我有一个 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"

      },

Answer 1

使用地图：${item.tags.map(d => `<span class="tag">${d}</span>`).join(" ")}其中 css 可能类似于：.tag {&nbsp; &nbsp; border: 1px solid lightgray;&nbsp; &nbsp; border-radius: 20px;&nbsp;&nbsp; &nbsp; padding: 5px;}