0

HTML ページに 1.png、2.png、3.png、4.png の 4 つの画像があります。ユーザーが画像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 回目は次のように注文しました。

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 に答える