Question

我已经着手制作拼图，我正在尝试在javascript中制作一个随机播放功能。当我点击文件时，这些碎片按照它们应该的方式进行洗牌。但是当紫色方块到达网格中的＃1位置时，它不会移动！

这是我的HTML / Javascript：

<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>

<div id="poster">

    <div id="row1">
        <div>
            <img src="images/black.gif" alt="" id="poster_place_1"/>
        </div>

        <div>
            <img src="images/blue.gif" alt="" id="poster_place_2" />
        </div>

        <div>
            <img src="images/brown.gif" alt="" id="poster_place_3"/>
        </div>
    </div>

    <div id="row2">    
        <div>
            <img src="images/cyan.gif" alt="" id="poster_place_4"/>
        </div>

        <div>
            <img src="images/darkgreen.gif" alt="" id="poster_place_5"/>
        </div>

        <div>
            <img src="images/green.gif" alt="" id="poster_place_6"/>
        </div>
    </div>

    <div id="row3">
        <div>
            <img src="images/orange.gif" alt="" id="poster_place_7"/>
        </div>

        <div>
            <img src="images/pink.gif" alt="" id="poster_place_8"/>
        </div>

        <div>
            <img src="images/purple.gif" alt="" id="poster_place_9"/>
        </div>
    </div>

</div>

<script type="text/javascript" charset="utf-8">


function Shuffle(o) {
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};


document.onclick = function()
{
    var testArray = ["poster_place_1","poster_place_2","poster_place_3","poster_place_4","poster_place_5","poster_place_6","poster_place_7","poster_place_8","poster_place_9"];
    Shuffle(testArray);
    document.getElementById("poster_place_9").id = testArray[0];
    document.getElementById("poster_place_8").id = testArray[1];
    document.getElementById("poster_place_7").id = testArray[2];
    document.getElementById("poster_place_6").id = testArray[3];
    document.getElementById("poster_place_5").id = testArray[4];
    document.getElementById("poster_place_4").id = testArray[5];
    document.getElementById("poster_place_3").id = testArray[6];
    document.getElementById("poster_place_2").id = testArray[7];
    document.getElementById("poster_place_1").id = testArray[8];

}
</script>

这是css：

#poster_place_1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

#poster_place_2 {
    position: absolute;
    left: 167px;
    top: 0px;
}

#poster_place_3 {
    position: absolute;
    left: 334px;
    top: 0px;
}

#poster_place_4 {
    position: absolute;
    left: 0px;
    top: 167px;
}

#poster_place_5 {
    position: absolute;
    left: 167px;
    top: 167px;
}

#poster_place_6 {
    position: absolute;
    left: 334px;
    top: 167px;
}

#poster_place_7 {
    position: absolute;
    left: 0px;
    top: 334px;
}

#poster_place_8 {
    position: absolute;
    left: 167px;
    top: 334px;
}

#poster_place_9 {
    position: absolute;
    left: 334px;
    top: 334px;
}

Answer 1

您正在使用元素ID来存储图片的位置;但是，id必须在HTML中是唯一的。重新分配ID时，发生的事情是暂时存在同时重复的ID。例如，如果testArray[0]是poster_place_1，则在此行之后

document.getElementById("poster_place_9").id = testArray[0];

HTML中有两个poster_place_1。 getter似乎占据了它找到的第一个，并且由于Purple是HTML中的最底层，所以当它恰好是getElementById次调用系列中的最后一个（即位置“poster_place_1）时，它永远不会被替换“，左上角），因为它上面有另一种颜色poster_place_1，或者它已经在那个位置。

我可以建议两个更改，首先，为位置重新分配设置临时ID，这不会导致重复，然后在分配所有新位置后，再次将它们更改为正确的ID。我这样做in this demo。因为我没有你的图像，所以用51-59的数字代替颜色。临时名称只是数字。

或者，您可以重新构建代码并使用class来存储位置，并使用id来存储颜色名称。那么您将不需要临时变量，因为您直接将ID与类匹配。在重新分配类时，我必须警告您有关跨浏览器的混淆。我发现的一些方法建议className，其他方法添加和删除类（这对我来说似乎过于复杂）。

Answer 2

....id = testArray[0];
document.getElementById("poster_place_8")...

您在为其分配新ID后选择元素。怎么可能有用？首先需要获取所有元素，然后分配所有新ID：

var ids = [];
var els = [];
for (var i=1; i<10; i++) {
    var id = "poster_place_"+i;
    ids.push(id);
    els.push(document.getElementById(id));
}
shuffle(ids); // the function should be named lowercase, btw
for (var i=0; i<els.length; i++)
    els[i].id = ids[i];

磁性随机？

2 个答案: