放大縮略圖onClick

我想製作一種圖像庫，用戶可以在其中查看一系列縮略圖並點擊它們以全尺寸查看它們。我已經成功完成了這項工作，但是我做到這一點的方式需要大量的重複代碼。這裏是什麼，我爲每個圖像的例子：放大縮略圖onClick

腳本

function load1() { 
    document.getElementById('wup').src = document.getElementById('wop1').src 
      var myElement = document.querySelector("#wup"); 
      myElement.style.visibility = "visible"; 
      var myElementB = document.querySelector("button"); 
      myElementB.style.visibility = "visible"; 
      var myElementC = document.querySelector("#cover"); 
      myElementC.style.visibility = "visible"; 
    }

差不多發生的事情是每一個縮略圖（有相當多）具有被點擊時運行這些功能之一。它會在屏幕中心出現一個大圖像，並且圖像的來源是任何縮略圖被點擊。雖然這種方法確實有效，但它需要很多感覺像不必要的重複。

我在尋找：

一種簡單而有效的方式做同樣的事情。

任何幫助將不勝感激！謝謝。

來源

2016-04-12 Harry Cosslett

函數接受參數，這意味着它們可以重複使用不同的參數 – adeneo

只需創建一個爲每個元素執行此操作的函數。

function showLargeImage(thumbnail) { 
    document.getElementById('wup').src = thumbnail.src 
    document.querySelector("#wup").style.visibility = "visible"; 
    document.querySelector("button").style.visibility = "visible"; 
    document.querySelector("#cover").style.visibility = "visible"; 
}

然後，對於每個圖像只需調用函數onclick。

<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>

來源

2016-04-12 03:15:13 hooda

放大縮略圖onClick

回答

相關問題