我可以将JS中的按钮文本与数组元素进行比较吗

Question

当我点击过滤按钮时，我想过滤我项目中的照片

(我的JSON文件中每个摄影师都有自己的标签，所以我想比较我点击的按钮的文本，看看它是否与任何标签匹配，并只显示与该按钮对应的照片(

我的项目是这样的->项目

我不知道我的逻辑是否适合这个动作，所以如果你知道我该怎么做，那就太棒了

这是我的代码

/*Loop throughe each photographe and create a new div then fill this div with photographer's inforamtions*/
function displayPhotographers(dataJson){
document.querySelectorAll(".filters_container span").forEach(btn => btn.addEventListener("click", () => {


dataJson.photographers.forEach(photographe => { 
const photographersDiv = document.getElementById('container');
const div = document.createElement("div");     

photographersDiv.appendChild(div);
div.innerHTML = `
<div class="photographerContainer ${photographe.tags.join(" ")}" }>
<div class="portraitBox">
<img src="${photographe.portrait}" alt="photo">
</div>
<h1 class="name">${photographe.name}</h1>
<p class="city">${photographe.city}, ${photographe.country}</p>
<p class="tagline">${photographe.tagline}</p>
<p class="price">${photographe.price}€/jour</p>
<p class="tags">${photographe.tags.map(tag => `<span class="tag">${tag}</span>`).join(" ")}</p>  
</div>
`   
}); 
}));
};

Answer 1

将标签类添加到每个照片div(以及photographerContainer(。

<div class="photographerContainer ${photographe.tags.join(" ")}">
<div class="portraitBox">
<img src="${photographe.portrait}" alt="photo">
</div>
<h1 class="name">${photographe.name}</h1>
<p class="city">${photographe.city}, ${photographe.country}</p>
<p class="tagline">${photographe.tagline}</p>
<p class="price">${photographe.price}€/jour</p>
<p class="tags">${photographe.tags.map(tag => `<span class="tag">${tag}</span>`).join(" ")}</p>  
</div>

如果单击了一个过滤器，则在所有photographerContainer元素上循环，并检查该元素是否有被单击的标记，如果没有该标记，则添加一个隐藏该div的类(如可见性：隐藏(。在取消选择标记的情况下，在所有标记元素上循环，并删除修改可见性的类。