JavaScript新手求教：如何为20个Div分配唯一随机类名

嘿，作为JavaScript新手能想到这个需求真的很棒！我来帮你一步步实现这个功能，保证每个div都拿到独一无二的随机类名～

首先咱们理清楚核心思路：

1. 抓取页面上所有类名为box0的div元素；
2. 从40个类名的数组里随机挑出20个不重复的类名；
3. 把这些独一无二的类名逐个分配给每个div。

第一步：你的HTML结构示例 #

<div class="container">
  <div class="container__grid">
    <div id="square1" class="box0"></div>
    <div id="square2" class="box0"></div>
    <div id="square3" class="box0"></div>
    <!-- ... 剩下的17个div元素 ... -->
  </div>
</div>

第二步：JavaScript实现代码 #

// 先定义你的40个类名数组，替换成你自己的类名就行
const allClassNames = [
  'style-1', 'style-2', 'style-3', 'style-4', 'style-5',
  'style-6', 'style-7', 'style-8', 'style-9', 'style-10',
  'style-11', 'style-12', 'style-13', 'style-14', 'style-15',
  'style-16', 'style-17', 'style-18', 'style-19', 'style-20',
  'style-21', 'style-22', 'style-23', 'style-24', 'style-25',
  'style-26', 'style-27', 'style-28', 'style-29', 'style-30',
  'style-31', 'style-32', 'style-33', 'style-34', 'style-35',
  'style-36', 'style-37', 'style-38', 'style-39', 'style-40'
];

// 1. 获取所有需要修改的div
const targetBoxes = document.querySelectorAll('.box0');

// 2. 工具函数：从数组里随机选指定数量的不重复元素
function pickUniqueRandomItems(arr, itemCount) {
  // 复制原数组，避免修改原始数据
  const arrCopy = [...arr];
  const result = [];
  
  for (let i = 0; i < itemCount; i++) {
    // 生成0到当前数组长度-1的随机索引
    const randomIdx = Math.floor(Math.random() * arrCopy.length);
    // 取出该索引的元素，同时从复制数组里删掉它（保证不会重复选中）
    result.push(arrCopy.splice(randomIdx, 1)[0]);
  }
  
  return result;
}

// 3. 挑出20个不重复的随机类名
const uniqueRandomClasses = pickUniqueRandomItems(allClassNames, targetBoxes.length);

// 4. 给每个div分配类名
targetBoxes.forEach((box, index) => {
  // 两种方式可选：
  // 方式一：替换掉原来的box0类
  box.className = uniqueRandomClasses[index];
  
  // 方式二：保留box0类，新增随机类名（把上面一行注释掉，打开下面这行）
  // box.classList.add(uniqueRandomClasses[index]);
});

关键细节解释 #

• document.querySelectorAll('.box0')：会返回页面上所有类名为box0的元素集合，不管数量多少都能精准抓取；
• pickUniqueRandomItems函数：通过复制原数组+每次选中后移除元素的方式，从根源上避免了重复类名的问题；
• 分配类名的两种方式：如果不需要保留原来的box0样式，就用className直接替换；如果想保留原有样式，就用classList.add新增类名。

小提示 #

如果以后你的div数量或者类名数组长度有变化，代码也能自动适配——因为我们用了targetBoxes.length来动态指定要挑选的类名数量，不用手动改数字～

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