如何使用JavaScript打乱div内部内容？现有代码仅能打乱div位置

开发者阿泽

2026-8-9

解决方案：保持div位置不变，打乱内部内容

你当前的代码只是将整个.diffpos容器重新排序，而不是替换容器内的内容。要实现「位置1显示Third、位置2显示First」这类效果，需要提取所有容器内的内容数据，打乱后再重新分配给每个固定位置的div。

修改后的代码

JavaScript 部分

shuffle();
function shuffle() {
    var container = document.getElementById("mainshuffle");
    var elements = Array.prototype.slice.call(container.getElementsByClassName("diffpos"));
    
    // 1. 收集所有div内部的内容数据
    var contentArray = elements.map(element => {
        return {
            text: element.querySelector('p').textContent,
            imgSrc: element.querySelector('img').src
        };
    });
    
    // 2. 打乱内容数组（复用你原来的打乱函数）
    shuffleArray(contentArray);
    
    // 3. 将打乱后的内容重新赋值给每个div
    elements.forEach((element, index) => {
        element.querySelector('p').textContent = contentArray[index].text;
        element.querySelector('img').src = contentArray[index].imgSrc;
    });
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

HTML 部分（保持不变）

<div id="mainshuffle">
    <div class="diffpos">
        <p>Position 1: First</p>
        <img src="position1.jpg">
    </div>
    <div class="diffpos">
        <p>Position 2: Second</p>
        <img src="position2.jpg">
    </div>
    <div class="diffpos">
        <p>Position 3: Third</p>
        <img src="position3.jpg">
    </div>
</div>