0

我在一个 HTML 页面中有 4 个图像：1.png、2.png、3.png 和 4.png。我希望当用户单击图像 3 时，执行各种图像右侧的旋转。（将图像 1 替换为图像 3，将图像 2 替换为图像 1，将图像 4 替换为图像 2，将图像 3 替换为图像 4）。

这是我尝试过的代码，但它不起作用：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">

            function rotation()
            {
                img1 = document.getElementById('img1');
                img2 = document.getElementById('img2');
                img3 = document.getElementById('img3');
                img4 = document.getElementById('img4');

                img2.parentNode.appendChild(img4);
                img1.parentNode.appendChild(img2);
                img3.parentNode.appendChild(img1);
                img4.parentNode.appendChild(img3);

            }
        </script>
        <style type="text/css">
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <table class="centrer">
            <tr>
                <td><img src="exercice1/1.png" alt="Image 1" id="img1"></td>
                <td><img src="exercice1/2.png" alt="Image 2" id="img2"></td>
            </tr>
            <tr>
                <td><img src="exercice1/3.png" alt="Image 3" id="img3" onclick="rotation()"></td>
                <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
            </tr>
        </table>
    </body>
</html>

问题是当我第一次单击图像 3 时，图像的顺序如下：

2
1  3  4

第二次他们这样排序：

2  1  3  4

我希望他们像这样订购：

旋转前：

1  2
3  4

旋转后：

3  1
4  2
4

2 回答 2

1

改为更改src属性。像这样：

function rotation()
{
    img1 = document.getElementById('img1');
    img2 = document.getElementById('img2');
    img3 = document.getElementById('img3');
    img4 = document.getElementById('img4');

    src1 = img1.src;
    src2 = img2.src;
    src3 = img3.src;
    src4 = img4.src;

    img2.src = src4;
    img1.src = src2;
    img3.src = src1;
    img4.src = src3;
}

http://jsfiddle.net/gJK8D/2/

于 2013-02-20T21:46:11.253 回答
0

而发生了什么？我的猜测是元素的 parentNode 在您移动它们时会发生变化：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">

            function rotation()
            {
                var img1 = document.getElementById('img1'),
                    img2 = document.getElementById('img2'),
                    img3 = document.getElementById('img3'),
                    img4 = document.getElementById('img4'),
                    cont1 = img1.parentNode,
                    cont2 = img2.parentNode,
                    cont3 = img3.parentNode,
                    cont4 = img4.parentNode;

                cont2.appendChild(img4);
                cont1.appendChild(img2);
                cont3.appendChild(img1);
                cont4.appendChild(img3);

            }
        </script>
        <style type="text/css">
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <table class="centrer">
            <tr>
                <td><img src="exercice1/1.png" alt="Image 1" id="img1"></td>
                <td><img src="exercice1/2.png" alt="Image 2" id="img2"></td>
            </tr>
            <tr>
                <td><img src="exercice1/3.png" alt="Image 3" id="img3" onclick="rotation()"></td>
                <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
            </tr>
        </table>
    </body>
</html>
于 2013-02-20T21:29:35.897 回答