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

Calling a method individually by class selector

本文关键字：调用 方法 单独 选择器      更新时间：2023-09-26

在我的博客中，我正在使用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

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

英语是调用函数randomColor()并获取颜色，然后对与类匹配的所有元素设置相同。

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

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

您可以将css()与回调一起使用，它将迭代元素，您可以通过返回来更新值

$('.page-title').css("color", randomColor);
<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>

Twig 有一个随机函数，你可以使用它：

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