使用 html 和 javascript 的 aspx 不会更改 html 和 javascript 编码中的图像

Question

我有一个网站，非常简单的一页使用母版页和一个网页。这是在 aspx 中完成的，但我想在 html 中进行编码以遵守标记验证服务的标准。

所以，在我的页面上，我有一个主图像：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <img id="imgM" alt="Main Image" runat="server" src="~/images/main-images/01.JPG"/>

我有 10 个图像按钮。我将列出前 3 个

<table style="padding: 0 38px">
        <tr>
            <td>
                <input type="image" id="ith1" src="images/thumb-images/01.JPG" alt="01" onclick="changePic(1)" />
            </td>
            <td>
                <input type="image" id="ith2" src="images/thumb-images/02.JPG" alt="02"  onclick="changePic(2)" />
            </td>
            <td>
                <input type="image" id="ith3" src="images/thumb-images/03.JPG" alt="03"  onclick="changePic(3)" />
            </td>

现在我有这个 java 脚本代码，在我的 head 内容占位符中

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        function changePic(num) {
            switch (num) {
                case 1:
                    mypic = "/images/main_images/01.jpg";
                    break;
                case 2:
                    mypic = "/images/main_images/02.jpg";
                    break;
                case 3:
                    mypic = "/images/main_images/03.jpg";
                    break;
                case 5:
                    mypic = "/images/main_images/05.jpg";
                    break;
            }
            document.getElementById("imgM").src = mypic;
        }
    </script>
</asp:Content>

我是通过查看更改图片的示例从网上获得的。 我注意到的是，如果没有runat="server"，我的主图像将不会显示。 但是尽我所能，一旦我点击了一个图像按钮，我就无法改变图像。 我在这里做错了什么？是因为这是母版页和内容页的东西吗？还是我只是编码错误？ 我可以通过 .cs 页面轻松做到这一点。只是我还必须了解 WS3 验证器以及如何在 html 中制作我的网站

Answer 1

您是否检查过任何 javascript 错误或调试过 javascript 执行以便知道脚本运行？

你使用 jQuery 吗？

*编辑 - 添加 alert() * 改变

case 1:
    mypic = "/images/main_images/01.jpg";
    break;

到

case 1:
  alert('1');
  mypic = "/images/main_images/01.jpg";
  break;

如果 javascript 运行，您将在尝试更改为 img 1 时收到一个警告框。

-------- 编辑 2 ---------------

我写了一个有效的小例子：

<img id="imgM" runat="server" src="~/Images/accent.png"/>
    <input type="image" id="ith1" src="~/Images/bullet.png" alt="01" onclick="changePic(1)" />
    <script type="text/javascript">
        function changePic(num) {
            var mypic = "";
            switch (num) {
            case 1:
                mypic = "/Images/heroAccent.png";
                alert(mypic);
                break;
            }
            document.getElementById("imgM").src = mypic;
        }

    </script>

你使用 jquery 吗？ img 标签的 src 属性是否改变了？