如何添加多个类别

Question

我正在尝试制作一个电影网站，并添加了一些类别。但是你知道电影/连续剧没有一个类别。我需要添加多个。我试着做category: "Mind-Bending","Ominous", 它没有用。

const posters = [
{
    title: "Dark",
    category: "Mind-Bending",
    img: "https://i.hizliresim.com/kl5ikc6.png",
    desc: `A family saga with a supernatural twist, set in a German town where the disappearance of two young,
    children exposes the relationships among four families.`
}]

const btnContainerDOM = document.querySelector(".categorie-cont")
const moviesContainerDOM = document.querySelector(".movies")
const btnList = ["All","Mind-Bending","Chilling","Ominous"]

btnList.forEach((value) => {
  let button = document.createElement("button")
  button.innerHTML = value
  button.setAttribute("data-id",value)
  button.addEventListener("click",buttonClick)
  btnContainerDOM.append(button)
})

function buttonClick(){
  const result = (this.getAttribute("data-id") === "All") ? posters : posters.filter((item) 
=> {
    return item.category == this.getAttribute("data-id")
});
addMovie(result) 
}

Answer 1

function buttonClick() {
var i, j;
const result = (this.getAttribute("data-id") === "All") ? posters : posters.filter((item) => {
    for (i = 0; i < posters.length; i++) {
        for (j = 0; j < posters[i].category.length; j++) {
            return item.category[j] == this.getAttribute("data-id")
        }
    }
});
addMovie(result)

}

我这样做了，但它仍然没有用

Answer 2

.includes() 检查您的数组或字符串是否包含子字符串。在您的情况下，您想检查 category 的数组是否包含所选类别。

function buttonClick(){
  const dataId = this.getAttribute("data-id");

  const result = dataId === "All" ? posters : posters.filter((item) => {
    return item.category.includes(dataId);
  });

  addMovie(result) 
}

Answer 3

所以如果你想拥有更多的类别，你可以在posters 中定义category 为几个类别的Array，如下所示：

const posters = [
{
    title: "Dark",
    category: ["Mind-Bending", "Chilling"],
    img: "https://i.hizliresim.com/kl5ikc6.png",
    desc: `A family saga with a supernatural twist, set in a German town where the disappearance of two young,
    children exposes the relationships among four families.`
}]

自然，这意味着您需要稍微调整您的代码。