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

Question

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

缩略图的 HTML 代码是：

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

onclick 函数为：

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

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

请问我做错了什么？

非常感谢

Answer 1

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

型号

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

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

PageModel

 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/Images

页数

@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>
}

测试

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

Javascript unable to change image src when using onclick

javascript

c#

asp.net-core

razor-pages