如何在不声明外部变量的情况下替换类名末尾的随机数字？

你可以直接从目标元素的classList中匹配并移除带有数字后缀的类，不需要外部变量记录上一次的数字。核心思路是通过正则表达式筛选出符合home--[0-9]格式的类，再进行移除和替换：

function onRandomize() {
  const homeElement = document.querySelector('.home');
  // 从类列表中找到带数字后缀的目标类
  const targetClass = [...homeElement.classList].find(className => /^home--\d$/.test(className));
  
  // 如果找到旧类就移除
  if (targetClass) {
    homeElement.classList.remove(targetClass);
  }
  
  // 生成随机数并添加新类
  const randomNum = gsap.utils.random(0, 9, 1);
  homeElement.classList.add(`home--${randomNum}`);
}

代码说明： #

• 使用扩展运算符[...homeElement.classList]把DOMTokenList转为数组，方便用find方法筛选类
• 正则表达式/^home--\d$/精准匹配以home--开头、末尾跟单个数字的类（^和$确保完全匹配，避免误删类似home--10的类）
• 即使元素之前没有带数字后缀的类，find会返回undefined，classList.remove(undefined)不会触发报错，代码容错性更好

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