Question

这是我的代码：

    <!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图像时加载画布中的cycle1。当我点击循环2图像时加载循环2。问题是我的代码总是首先加载td image.whatever我点击了。

Answer 1

问题在于你总是将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（）中的最后一行。如果页面已滚动，这将使页面不会跳到顶部。

如何从多个图像中查看画布上的图像

1 个答案: