javascript - 通过类选择器单独调用方法

Question

在我的博客中，我使用的是 Pico CMS，在 index.twig 页面中，我编写了这段代码来生成带有页面标题、描述和 URL 的 HTML:

{% for page in pages|sort_by("time") %}
    {% if page.id starts with "blog/" %}
        <div class="post">
            <h3>
                <a class="page-title" href="{{ page.url }}">{{ page.title }}</a>
                <small class="date">{{ page.date }}</small>
            </h3>
            <p class="excerpt">{{ page.description }}</p>
    {% endif %}
{% endfor %}

我的想法是用不同的颜色制作每个标题，我使用了 randomColor ，并编写了这段 JavaScript:

$('.page-title').css('color', randomColor() );

但这使得页面中的所有页面标题都具有相同的颜色，我希望它们中的每一个都具有不同的颜色。 这是网址:blog.lfoscari.com

Answer 1

$('.page-title').css('color', randomColor() ); 用简单的英语就是 调用函数 randomColor() 并获取颜色，然后将相同的颜色设置为所有匹配类的元素。

---

你必须使用 each()迭代所有元素，通过调用函数获取随机颜色并将其单独设置给每个元素。

$('.page-title').each(function() {
    $(this).css('color', randomColor())
});