HTML/JS技术问题：需随机为部分item类div加no-active类，当前代码仅显1个div

我来帮你搞定这个问题！你需要的是随机给部分.item类的div添加no-active类，同时解决之前代码只能显示1个div的问题。下面是具体的解决方案：

1. 先搞定“只显示1个div”的问题 #

你之前的代码大概率是用了document.querySelector('.item')——这个方法只会返回第一个匹配的元素，所以后续操作都只作用在第一个div上，才导致其他div没正常显示。正确的做法是用document.querySelectorAll('.item')，它能获取到所有带.item类的元素，返回一个可遍历的NodeList。

2. 随机为部分元素添加no-active类 #

这里给你两种常用的随机逻辑，你可以根据需求选：

方式一：按概率随机分配（比如每个元素有50%概率被标记） #

适合不确定具体要选多少个，只想按比例随机处理的场景：

<!-- 示例HTML结构 -->
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>

<script>
// 获取所有.item元素
const allItems = document.querySelectorAll('.item');

// 遍历每个元素，随机决定是否添加类
allItems.forEach(item => {
  // 这里设置50%的概率，你可以调整数值（比如0.3就是30%）
  if (Math.random() < 0.5) {
    item.classList.add('no-active');
  }
});
</script>

方式二：固定随机选N个元素添加类 #

如果你想明确指定要标记的数量（比如从所有元素里随机选2个），可以用这种方式：

const allItems = document.querySelectorAll('.item');
const total = allItems.length;
// 你想要添加类的元素数量
const targetNum = 2;

// 把NodeList转成数组，方便打乱排序
const itemsArray = Array.from(allItems);
// 随机打乱数组顺序
const shuffledItems = itemsArray.sort(() => Math.random() - 0.5);

// 取前targetNum个元素添加类
shuffledItems.slice(0, targetNum).forEach(item => {
  item.classList.add('no-active');
});

3. 额外排查：no-active类的CSS样式 #

如果你的no-active类设置了display: none，那被添加这个类的元素会直接隐藏。如果你只是想标记而非隐藏，建议调整样式，比如：

.no-active {
  opacity: 0.6; /* 降低透明度 */
  pointer-events: none; /* 禁止交互（可选） */
}

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