如何用原生JavaScript随机打乱div内的图片？

你的代码核心问题是只打乱了路径数组，但没有将打乱后的路径同步到页面的图片元素上，而且原数组只有3个路径，无法对应6个需要成对出现的图片容器。以下是修正后的原生JS实现：

修正后的JavaScript代码 #

"use strict";

const containers = document.querySelectorAll(".img-container");
const images = document.querySelectorAll(".hidden");

// 扩展数组：每个图片路径出现两次，匹配6个容器
let imgArr = [
  "/image/elephant.jpg",
  "/image/koalas.jpg",
  "/image/lion.jpg",
  "/image/elephant.jpg",
  "/image/koalas.jpg",
  "/image/lion.jpg"
];

// 洗牌函数（Fisher-Yates 算法，你的实现是对的）
const shuffle = function(arr) {
  // 复制原数组避免修改原始数据
  const shuffledArr = [...arr];
  for (let i = shuffledArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffledArr[i], shuffledArr[j]] = [shuffledArr[j], shuffledArr[i]];
  }
  return shuffledArr;
};

// 初始化打乱并赋值图片路径
function initGame() {
  const shuffledPaths = shuffle(imgArr);
  // 遍历所有图片，设置打乱后的路径
  images.forEach((img, index) => {
    img.src = shuffledPaths[index];
  });
}

// 卡片翻转逻辑
containers.forEach((container, index) => {
  container.addEventListener("click", () => {
    images[index].classList.remove("hidden");
  });
});

// 页面加载时初始化游戏
window.addEventListener("load", initGame);

关键修改说明 #

• 扩展路径数组：原数组只有3个元素，现在扩展为6个（每个图片重复一次），满足记忆游戏成对匹配的需求
• 数组复制：洗牌时复制原数组，避免修改原始的路径数组，保证每次初始化都能从原始状态重新打乱
• 同步页面元素：通过images.forEach将打乱后的路径逐个赋值给<img>的src属性，真正实现页面图片的打乱
• 初始化触发：在页面加载完成后调用initGame，确保打开页面时就显示打乱后的图片

补充提示 #

• 后续需要重置游戏时，只需再次调用initGame()，同时记得给所有图片重新添加hidden类
• 可以给图片容器添加统一的“背面”样式，未点击时显示背面，提升游戏交互体验

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