顺时针图像一键切换 Javascript table

Question

我正在尝试创建一个 table，其中包含 4 张随机排列的图像。当单击一个图像时，它应该与顺时针方向的图像一起移动。但是，当我这样做时，尽管更改了 onclick + "clickmove(3)" 属性，但我还是让两个对角线图像相互移动。

单击最后一个插槽后，程序 returns 出现错误并且不移动图像，表明我无法移动到第三个插槽的 x+1 以上。我试过各种方法都没有用。

提前致谢

<html>
<script>

    function clickMove(x)
    {
        var temp;
        d = document.images

        if (d[x].src)
        {
            temp = d[x].src
            d[x].src = d[x + 1].src
            d[x + 1].src = temp
        }
}
    function check(n)
    {
        //d = document.images[n].src

        //alert(s+":"+d.length

        //if (d.charAt(d.length == 1)
    }
</script>


    <head>
        <title> Assignment 4 Kaltenbaugh </title>
    </head>

        <body background = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment3/table1.png">
            <table border = "0" cellspacing = "0" cellpadding = "0" align = "center">
                <tr>
                    <td id = "t0"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_04.jpg" onclick = "clickMove(0)"></td>
                    <td id = "t1"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_03.jpg" onclick = "clickMove(1)"></td>
                </tr>
                <tr>
                    <td id = "t2"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_02.jpg" onclick = "clickMove(3)"></td>
                    <td id = "t3"><img src = "http://webclass.sru.edu/CPSC-217-01.0118/Kaltenbaugh%20Cain%20%20CXK1047/Assignment4/treePic_01.jpg" onclick = "clickMove(2)"></td>
                </tr>
            </table>
        </body>

</html>

Answer 1

当x为3时，x+1为4，越界。当 x 为 0、1 或 2 时 x + 1 可以，但您想将图像 3 与图像 0 交换。

有多种方法可以做到这一点，其中之一是将 x + 1 替换为 (x + 1) % 4。

    if (d[x].src)
    {
        temp = d[x].src
        d[x].src = d[(x + 1) % 4].src
        d[(x + 1) % 4].src = temp
    }

编辑：在上面的示例中，我假设您基本上想要 x + 1，但您只需要解决 wrap-around 问题。至于顺时针的问题，这样想：

0 1
2 3

0 应与 1 交换，1 应与 3 交换，2 应与 0 交换，3 应与 2 交换。只需从这些关系中提取一点 table。

    if (d[x].src)
    {
        var y = [1, 3, 0, 2][x];
        temp = d[x].src;
        d[x].src = d[y].src;
        d[y].src = temp;
    }

顺时针图像一键切换 Javascript table

Clockwise Image swap in Javascript table with one click

javascript

swap

image