使用javascript为每个类别设置不同的颜色

Question

我试图在 javascript 中实现一些目标，

我想为每个类别设置特定的颜色

例如： 如果category.name == x则颜色=蓝色 如果category.name == y则颜色=红色 ...

我尝试过这样，但我想我错过了一些东西：

categories.forEach(category => {
            if (category.attributes.slug = "animation") {
                cat.style.color = animColor;
            }
            if (category.attributes.slug = "decor") {
                cat.style.color = decorColor;
            }
            if (category.attributes.slug = "illustrations") {
                cat.style.color = illuColor;
            }
            if (category.attributes.slug = "developpement-visuel") {
                cat.style.color = devVisuel;
            }
            if (category.attributes.slug = "realisations") {
                cat.style.color = real;
            }
            if (category.attributes.slug = "croquis") {
                cat.style.color = croquis;
            }
        });


   <div>
            <Header
                categories={categories}
                homepage={homepage} />
            <div className="hidden md:block px-5 pt-10">
                <a className="hover:no-underline " href="/">
                    <h3 className="text-xl uppercase tracking-widest mb-4">{homepage.attributes.hero.title}</h3>
                </a>
                <h5 className="text-sm mb-10">{homepage.attributes.bio.text}</h5>
                <nav>
                    <ul>
                        {categories.map((category) => {
                            return (
                                <li key={category.id} className="mb-4">
                                    <Link href={`/category/${category.attributes.slug}`}>
                                        <a id="cat" className="uppercase font-light text-sm">{category.attributes.name}</a>
                                    </Link>
                                </li>
                            )
                        })}
                    </ul>
                </nav>
            </div>
        </div>

你能帮我找到解决方案吗？

Answer 1

您可以使用对象作为字典将“slug”翻译为“color”。

您可以在categories.map内部函数中设置颜色属性。

我删除了 id="cat" 因为这会导致重复的 ID，这永远不会好。

const colorMap = {
  "animation": animColor,
  "decor": decorColor,
  "illustrations": illuColor,
  "developpement-visuel": devVisuel,
  "realisations": real,
  "croquis": croquis
};

   <div>
            <Header
                categories={categories}
                homepage={homepage} />
            <div className="hidden md:block px-5 pt-10">
                <a className="hover:no-underline " href="/">
                    <h3 className="text-xl uppercase tracking-widest mb-4">{homepage.attributes.hero.title}</h3>
                </a>
                <h5 className="text-sm mb-10">{homepage.attributes.bio.text}</h5>
                <nav>
                    <ul>
                        {categories.map((category) => {
                            return (
                                <li key={category.id} className="mb-4">
                                    <Link href={`/category/${category.attributes.slug}`}>
                                        <a className="uppercase font-light text-sm" style=`color: ${colorMap[category.attributes.slug]}`>{category.attributes.name}</a>
                                    </Link>
                                </li>
                            )
                        })}
                    </ul>
                </nav>
            </div>
        </div>