0

これは私のコードです:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery-ui.js"></script>
    <script src="js/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.20.min.js" type="text/javascript"></script>-->
    <head>

    <body>
    <canvas id="myCanvas" width="940" height="600" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
        function ImageLoad()
        {
            var ctx = document.getElementById('myCanvas').getContext('2d');

            var img = new Image();   // Create new img element  
            img.onload = function(){  
              // execute drawImage statements here  This is essential as it waits till image is loaded before drawing it.
                ctx.drawImage(img , 0, 0);

            };  
            img.src = $('img[alt="example"]').attr('src'); // Set source path 

        }
    </script>
    <!--<img src="basicCycle.jpg"/>-->
    <table border="1px">
    <tr>
    <td><a href="javascript:ImageLoad()"><img src="cycle6.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle1.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle2.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle3.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle4.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle5.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle6.jpg" alt="example" height="120" width="120"></a></td>
    <td><a href="javascript:ImageLoad()"><img src="cycle1.jpg" alt="example" height="120" width="120"></a></td>
    </tr>
    </table>
    </body>
    </html>

今、私はcycle1の画像をクリックするとキャンバスにcycle1をロードし、cycle2の画像をクリックするとcycle2をロードしたいと思います。問題は、私のコードが常に最初に td image.whatever をロードすることです。

4

1 に答える 1

0

問題は、常に alt が「example」である画像の src に src を設定していて、すべての画像にその alt があるため、常に最初のものを取得していることです。

それ以外の：

img.src = $('img[alt="example"]').attr('src'); // Set source path

これを行う：

img.src = $(this).find('img').attr('src');

「this」はクリックされたリンクを参照しますが、href 値を「#」に置き換える必要があります。

<td><a href="#"><img src="cycle1.jpg" alt="example" height="120" width="120"></a></td>

<script>そして、これを終了タグの直前に置きます:

$(document).ready(function () {
    $('a').click(ImageLoad);
});

また、次のように入力する必要があります。

return false;

ImageLoad() 内の最後の行として。これにより、ページがスクロールされた場合に、ページが一番上にジャンプしなくなります。

于 2013-07-12T12:57:10.700 に答える