Question

我在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

Answer 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/

Answer 2

发生了什么事呢？我的猜测是，移动它们时，元素的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>

图像向右旋转

2 个答案: