Question

在我的博客中，我使用Pico CMS，在index.twig页面中，我编写了这段代码，用于生成包含页面标题，说明和网址的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()并获取颜色，然后将其设置为 all 与该类匹配的元素。

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

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

Answer 2

您可以使用 css() with callback ，它会迭代元素，您可以通过返回来更新值

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page-title">1</div>
<div class="page-title">1</div>
<div class="page-title">1</div>
<div class="page-title">1</div>
<div class="page-title">1</div>
<div class="page-title">1</div>

＆＃13;

Answer 3

Twig有random function你可以使用：

<a class="page-title" 
   style="color: {{ random(['orange', 'pink', 'LightSkyBlue']) }}" 
   href="{{ page.url }}">{{ page.title }}</a>

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

3 个答案: