1

我已经着手制作一个谜题，我正在尝试在 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;
}
4

2 回答 2

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。我在这个演示中这样做。因为我没有你的图片，所以颜色被替换为 51-59 之间的数字。临时名称只是数字。

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

于 2012-07-09T22:49:19.423 回答
1 
....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];
于 2012-07-09T22:56:55.983 回答