Question

我想知道如何在我的代码中添加一个 javascript 片段，根据我的 Json 返回的类别 ID 显示或隐藏 div

<div id="community-members-member-content-categories-container">
  <div class="community-members-member-content-category page-text9">
    Romantic
  </div>
  <div class="community-members-member-content-category page-text9">
    Family
  </div>
  <div class="community-members-member-content-category page-text9">
    Outdoors
    &amp;
    wildlife</div>
  <div class="community-members-member-content-category page-text9">
    Wellness
  </div>
</div>

在这些 div 里面我有我的类别

下面我使用 javascript feth 从服务器获取信息并将其插入到 html 中，但我找不到使用类别执行此操作的方法，因为它返回的是数字而不是其内容！

const baseURL = `http://mulher.store/clara/admin/api/empresa.php?e=8`;
const empresas = document.querySelector('.empresas');
const galeria = document.querySelector('.galeria');

fetch(baseURL).then((answer) => {
  answer.json().then((response) => {
 
    const h1 = document.createElement('h1');
    h1.innerHTML = `
      <span>${response.empresa.nome}</span>                  
    `;
    empresas.append(h1);
 
    const p = document.createElement('p');
    p.innerHTML = `
      <span>${response.empresa.endereco}</span>                  
    `;
    empresas.append(p);

// IMAGES
    response.fotos.map((foto) => {
      const picture = document.createElement('picture');
      picture.innerHTML = `
        <img src="https://remote.la/img/community/${foto.url}" alt="Fotos" />
      `;
      galeria.append(picture);
    });
  });

JSON 结果：

object      {5}
empresa     {14}
fotos       [10]
instalacao  [8]
servico     [3]
categoria   [4]
  0 :   1
  1 :   2
  2 :   3
  3 :   5

例如：

类别 1：家庭第 5 类：运动这应该出现在“community-members-member-content-categories-container”div中

Image categories

Answer 1

很难从示例中完全理解您的代码。

据我所知，您可以使用条件检查图像的类别，并基于此更改 div 的样式。

// do this for each label/category
if (response.category.includes(1)) { 
   let div = document.getElementById("family")

   div.style.display = "none"
}

使用内置的 .includes() 方法，我们可以检查数组是否包含值，或者在您的情况下，是否包含与类别对应的数字。

根据 JSON 数据 id 隐藏或显示 div

1 个答案: