JavaScript技术求助：为每个.randfont类<p>元素分配独立字体

问题背景 #

我正在搭建一个帖子网站，想要给每个带.randfont类的<p>元素单独分配字体族，但当前代码会给所有该类元素添加同一个字体类，没法逐个设置。尝试获取元素ID存入数组时也出了问题，现有代码如下：

现有HTML代码 #

{% for poopfact in poopfacts %}
 <div class="col">
        <div class="row">
          <p>{{ poopfact.date }} </p>
          <p class="randfont randfont{{poopfact.id}}" id="{{poopfact.id}}">{{ poopfact.fact }}</p>
          <p> {{ poopfact.author }}</p>
        </div>
{% endfor %}

现有JavaScript代码 #

$( document ).ready( function() {
          $('.randfont').load(randomizeFonts()) 
          function randomizeFonts() {
            let fonts = ['caveat', 'indieflower', 'nanum', 'pacifico', 'pmarker', 'tangerine'];
            const randfonts = $('.randfont')
            for (let i = 0; i < randfonts.length; i++) {
              var random = fonts[Math.floor(Math.random() * fonts.length)];
              //get the ids of those items and put it into another array
              $(`.randfont`).addClass(random)
              }
          }
});

解决方案 #

核心问题 #

循环中每次都选中所有.randfont元素添加类，导致所有元素共用同一个字体；另外.attr("id")仅返回第一个匹配元素的ID，无法直接生成ID数组。

修正后的JavaScript代码 #

$(document).ready(function() {
  randomizeFonts();
  function randomizeFonts() {
    const fonts = ['caveat', 'indieflower', 'nanum', 'pacifico', 'pmarker', 'tangerine'];
    // 遍历每个.randfont元素，逐个处理
    $('.randfont').each(function() {
      // 随机挑选一个字体类
      const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
      // 给当前元素添加选中的字体类
      $(this).addClass(randomFont);
    });
  }
});

关键改动说明 #

• 使用each()方法遍历每个.randfont元素，确保每个元素独立处理
• $(this)在回调中指向当前遍历的元素，精准操作单个元素，不会影响其他帖子内容
• 移除了不必要的.load()调用，页面就绪时直接执行字体随机逻辑

可选优化：避免重复添加字体类 #

如果需要防止同一个元素被添加多个字体类，可以先移除所有已有的字体类，再添加新的：

$('.randfont').each(function() {
  const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
  // 先移除所有字体类，再添加新的
  $(this).removeClass(...fonts).addClass(randomFont);
});

内容的提问来源于stack exchange，提问作者kozendgray