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

Question

我正在努力在 javascript

中取得一些成就

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

例如：如果 catergory.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>

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

set a different color to each categories with javascript

javascript

foreach

loops