如何讀取存儲在圖像的data-src中的URL並在另一個img控制器的src中設置該URL？

Question

我正在使用ASP.net開發網站。 在頁面中我通過使用此代碼為圖像庫生成img控件。

  foreach (string url in listImageUrl)
            {
                LiteralControl lit = new LiteralControl();
                lit.Text = String.Format("<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='imgThumbnail' onclick='loadFullImage(this)'/>", url);

                pnlThumbnailImage.Controls.Add(lit);
            }

然后我將pnlThumbnailImage添加到我的頁面中的占位符。

頁面中還有另一個img控件。 它是這樣的。

<img id="imgFull" src="" />

我想要做的是當用戶點擊縮略圖上方時，存儲在“data-url =”中的完整圖像路徑應該應用於imgFull控件的src（另一個img控制器）。

那么如何在javascript中做到這一點？

我寫了這個javascript函數。 但它沒有用。

function loadFullImage(ctrl)
{
    var image = document.getElementById(ctrl);

    var imgFull = document.getElementById("imgFull");
    imgFull.src = image.getAttribute("data-url");

}

謝謝。

Answer 1

loadFullImage()函數內的ctrl參數不是圖像元素的id，而是單擊自身的HTML DOM元素。 因此，您的代碼應該是這樣的：

function loadFullImage(ctrl)
{
    var url = ctrl.getAttribute('data-url');

    var imgFull = document.getElementById("imgFull");
    imgFull.src = url;

}