使用onclick时Javascript无法更改图像src答案

【问题标题】：Javascript unable to change image src when using onclick使用onclick时Javascript无法更改图像src
【发布时间】：2021-07-21 00:41:02
【问题描述】：

我有一个包含许多图像缩略图的表格，然后当您单击图像时，会打开一个模式弹出窗口，然后将其全屏显示。

缩略图的 HTML 代码是：

<img src='@EngDwgListReturn.EngDwgTnURL' class="" onclick="changedata('@EngDwgListReturn.EngDwgURL')">

使用 onclick 函数：

function changedata(ImageURL) {         
        document.getElementById("DwgModelURL").src = ImageURL;
        $("#DwgModal").modal('show');
    }

当您单击缩略图时，它第一次会正确地全屏显示，但是当您单击另一个时，它不会显示新图像，只会显示您单击的第一个图像。

请问我做错了什么？

非常感谢

【问题讨论】：

您在开发控制台中是否遇到任何错误？
嗨，关于这个案例有什么最新进展吗？

标签： javascript c# asp.net-core razor-pages

【解决方案1】：

我测试了你的代码，它对我有用，下面是一个简单的演示，你可以检查一下。

型号

public class Image
{
    public List<EngDwgListReturn> EngDwgListReturn { get; set; }
}

public class EngDwgListReturn
{
    public string EngDwgTnURL { get; set; }
}

页面模型

 public class IndexModel : PageModel
{
    [BindProperty]
    public  Image Image { get; set; }
    public void OnGet()
    {
        Image = new Image
        {
            EngDwgListReturn = new List<EngDwgListReturn>
           {
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/aa.jpg"
              },
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/bb.jpg"
              },
               new EngDwgListReturn
              {
                  EngDwgTnURL="/images/cc.jpg"
              }
           }
        };
        }
}

wwwroot/图片

页面

@page
@model IndexModel
<body>
    <div class="modal" id="DwgModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Picture info</h4>
                </div>
                <div class="modal-body">
                    <img id="DwgModelURL" width="450" height="200" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
@foreach (var EngDwgListReturn in Model.Image.EngDwgListReturn)
{
    <img src='@EngDwgListReturn.EngDwgTnURL' width="40" height="50" onclick="changedata('@EngDwgListReturn.EngDwgTnURL')" />
}
@section Scripts
{
    <script>
        function changedata(ImageURL) {
            document.getElementById("DwgModelURL").src = ImageURL;
            $("#DwgModal").modal('show');
        }
    </script>
}

测试

【讨论】：