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>

现在我想在单击循环1 图像时在画布中加载循环1。当我单击循环2 图像时加载循环2。问题是我的代码总是加载第一个 td image.whatever 我点击。

4

1 回答 1

0

问题是您总是将 src 设置为 alt 为“example”的图像的 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 回答