如何用JavaScript/PHP实现演员投票网站图片随机洗牌？

嘿，我来帮你搞定这个问题！你当前的代码只显示一张随机图片，是因为你把所有.playerWrap元素都隐藏了，只展示了随机选中的那一个。如果想要实现洗牌式的随机排序（所有图片都显示，但顺序每次刷新都不一样），可以用以下两种方案：

方案一：JavaScript前端洗牌（适合已渲染完成的DOM或修改模板渲染逻辑） #

方法1：直接打乱DOM元素顺序 #

如果你的模板已经渲染出了所有演员卡片，可以直接通过JS打乱这些DOM元素的排列：

// 获取所有演员卡片并转为数组
const playerCards = Array.from(document.querySelectorAll('.playerWrap'));

// 实现Fisher-Yates洗牌算法（公平的随机打乱）
function shuffleCards(array) {
  let currentIndex = array.length, randomIndex;
  // 从后往前遍历，逐个交换随机位置的元素
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    // 交换元素
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

// 获取卡片的父容器（请根据你的实际DOM结构修改选择器）
const cardContainer = document.querySelector('.playerWrap').parentNode;
// 清空容器后重新插入打乱后的卡片
cardContainer.innerHTML = '';
shuffleCards(playerCards).forEach(card => cardContainer.appendChild(card));

方法2：渲染前打乱数据（更高效） #

如果可以修改模板渲染的逻辑，建议在渲染前就打乱players数组，这样直接渲染打乱后的结果，无需二次操作DOM：

// 先复制原数组并打乱（避免修改原数据）
function shufflePlayers(array) {
  const shuffled = [...array];
  let currentIndex = shuffled.length, randomIndex;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [shuffled[currentIndex], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[currentIndex]];
  }
  return shuffled;
}

// 打乱players数组
const shuffledPlayers = shufflePlayers(players);

// 用Underscore.js模板渲染打乱后的数组
const template = _.template(document.getElementById('player-template').innerHTML);
// 替换成你的容器ID
document.getElementById('player-container').innerHTML = template({ players: shuffledPlayers });

方案二：PHP后端洗牌（页面加载时直接输出随机顺序） #

如果希望在后端就处理好随机顺序，前端直接渲染即可，可以在PHP中打乱演员数组：

// 假设$players是你从数据库或其他来源获取的演员数据数组
shuffle($players); // PHP内置的shuffle函数会直接打乱数组顺序

之后你的模板会直接使用这个打乱后的$players数组，每次页面刷新时，PHP都会输出随机排序的演员数据，前端渲染出来自然就是随机顺序了。

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