Javascript 使用 onclick 時無法更改圖像 src

Question

我有一個包含許多圖像縮略圖的表格，然后當您單擊圖像時，會打開一個模式彈出窗口，然后全屏顯示。

縮略圖的 HTML 代碼為：

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

onclick Function 為：

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

當您單擊縮略圖時，它會第一次正確地全屏顯示，但是當您單擊另一個縮略圖時，它不會顯示新圖像，只會顯示您單擊的第一個圖像。

請問我做錯了什么？

非常感謝

Answer 1

我測試了你的代碼，它對我有用，下面是一個簡單的演示，你可以檢查一下。

Model

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

測試

Javascript 使用 onclick 時無法更改圖像 src

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-28 02:15:05

Javascript 使用 onclick 時無法更改圖像 src

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-28 02:15:05

解決方案1
0 已采納 2021-04-28 02:15:05