点击元素随机显示多个Div区块的技术实现求助

问题分析 #

你当前的代码只针对menu_cover2类的Div做了随机显示逻辑，完全没处理menu_cover组的Div，而且逻辑里每次仅能显示单个Div。要实现点击后从两组Div中各随机显示一个，需要调整代码的复用性和目标元素的范围。

修复后的完整代码 #

HTML（保持原结构无需改动）

<div>
  <p class="random bloc">Random</p>
  <div class="menu_cover invisible bloc">One</div>
  <div class="menu_cover invisible bloc">Menu two</div>
  <div class="menu_cover invisible bloc">Menu three</div>
  <div class="menu_cover invisible bloc">Menu four</div>
  <div class="menu_cover invisible bloc">Menu five</div>
  <div class="menu_cover invisible bloc">Menu six</div>
</div>

<div>
  <div class="menu_cover2 invisible bloc offset">Menu Xone</div>
  <div class="menu_cover2 invisible bloc offset">Menu Xtwo</div>
  <div class="menu_cover2 invisible bloc offset">Menu Xthree</div>
  <div class="menu_cover2 invisible bloc offset">Menu Xfour</div>
  <div class="menu_cover2 invisible bloc offset">Menu Xfive</div>
  <div class="menu_cover2 invisible bloc offset">Menu Xsix</div>
</div>

CSS（保持原样式无需改动）

.visible {
  display: block;
}

.invisible {
  display: none;
}

.bloc {
  padding: 20px;
  border: 1px solid #ff0000;
}

.offset {
  margin-top: 200px;
}

JavaScript（核心修改）

const randomBtn = document.querySelector('.random');

// 封装复用函数：传入元素集合，随机显示其中一个
function showRandomElement(elements) {
  // 先隐藏所有元素
  elements.forEach(el => {
    el.classList.remove('visible');
    el.classList.add('invisible');
  });
  
  // 随机选一个显示
  const randomIndex = Math.floor(Math.random() * elements.length);
  elements[randomIndex].classList.remove('invisible');
  elements[randomIndex].classList.add('visible');
}

function openRandomMenus() {
  // 获取两组Div的元素集合，转成数组方便操作
  const menuCovers1 = Array.from(document.querySelectorAll('.menu_cover'));
  const menuCovers2 = Array.from(document.querySelectorAll('.menu_cover2'));
  
  // 分别对两组执行随机显示逻辑
  showRandomElement(menuCovers1);
  showRandomElement(menuCovers2);
}

randomBtn.addEventListener('click', openRandomMenus);

关键修改点 #

1. 封装复用逻辑：把“隐藏所有+随机显示一个”的逻辑抽成独立函数，避免重复代码，同时支持多组Div的处理。
2. 覆盖所有目标组：同时获取menu_cover和menu_cover2的元素集合，分别调用随机显示函数，实现两组同时随机展示。
3. 修复原代码bug：原代码中如果初始没有visible元素，skip变量会未定义导致报错，新逻辑直接随机选一个，规避了这个问题。
4. 使用现代API：用querySelector和querySelectorAll替代getElementsByClassName，转成数组后使用forEach更简洁易读。

可选扩展：避免重复显示上次的元素 #

如果需要每次点击不重复显示上一次的元素，可以修改showRandomElement函数，记录每组的上次索引：

// 记录每组的上次索引
const lastIndexes = {
  menu_cover: -1,
  menu_cover2: -1
};

function showRandomElement(elements, groupKey) {
  elements.forEach(el => {
    el.classList.remove('visible');
    el.classList.add('invisible');
  });
  
  let randomIndex;
  do {
    randomIndex = Math.floor(Math.random() * elements.length);
  } while (randomIndex === lastIndexes[groupKey]);
  
  lastIndexes[groupKey] = randomIndex;
  elements[randomIndex].classList.remove('invisible');
  elements[randomIndex].classList.add('visible');
}

// 调用时传入组标识
showRandomElement(menuCovers1, 'menu_cover');
showRandomElement(menuCovers2, 'menu_cover2');

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