在orde中的可點擊事件顯示圖像

因此，我有一個照片庫包含照片的縮略圖和一個大的圖像。當用戶點擊縮略圖時，它應該顯示較大的縮略圖。一切都完成了，但我無法讓JS工作。我知道這很小，所以有人可以看看我做錯了嗎？先謝謝你。在orde中的可點擊事件顯示圖像

<html> 

<head> 
    <title></title> 
    <meta charset = "UTF-8"> 
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge"> 
    <meta name = "viewport" content = "width=device-width, initial-scale = 1"> 

    <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
    <link rel = "stylesheet" href = "html5reset.css"> 
    <link rel = "stylesheet" href = "gallery.css"> 


</head> 

<body> 

    <div class = "main"> 

     <div class = "wrapper"> 

      <div id = "largeImage"> 

     <img src = "images/machine_1.jpg" alt = "machining image" width = "920" height = "400" id = "bigImage" class = "border"/> 

      </div> 

      <div class = "thumbnail"> 

       <img src="images/machine_1.jpg" alt = "machining lathe" id="machine_1"/> 
       <img src="images/machine_2.jpg" alt = "machining lathe" id="machine_2"/> 
       <img src="images/machine_3.jpg" alt = "machining lathe" id="machine_3"/> 
       <img src="images/machine_4.jpg" alt = "machining lathe" id="machine_4"/> 
       <img src="images/machine_5.jpg" alt = "machining lathe" id="machine_5"/> 
       <img src="images/machine_6.jpg" alt = "machining lathe" id="machine_6"/> 

      </div> 
     </div> 
    </div> 

    <script src = "gallery.js"></script> 


</body> 

</html>

function imgFunction() { 

    var bigImage = document.getElementById("bigImage"); 
    var thumbnail = document.getElementById("thumbnail"); 

    thumbnail.addEventListener("click",function(event) { 

     if (event.target.tagName == "IMG") { 
      bigImage.src = event.target.src; 
     } 
    },false); 
} 

window.addEventListener("load", imgFunction, false);

來源

2016-05-04 Murk

你得到一個錯誤？你是否完成了'console.log（event）'或'console.log（event.target）'以確保你獲得了正確的元素？你做了什麼來嘗試和調試呢？ –

你沒有'id =「thumbnail」'元素，所以'document.getElementById（「thumbnail」）'不會解決任何問題。 –

我想你想選擇<div class="thumbnail">但是你用getElementById。

所以，只要給你的div的id：<div id="thumbnail">。

來源

2016-05-04 17:26:43 monsterkrampe

JQuery的編織：http://kodeweave.sourceforge.net/editor/#3aa0ea4a91d84cfd35f0b8b4151499bc
平原JS編織：http://kodeweave.sourceforge.net/editor/#21d2b4bd5fa4c388d7e63c34ea23f4cd

你的主要問題是你打電話document.getElementById("thumbnail")沒有#thumbnail存在於你的HTML。

所以要麼改變...

document.getElementById("thumbnail")

到

document.querySelector(".thumbnail")

或

到

<div id="thumbnail">

Here's a JQuery solution.

var thumbnail = document.querySelector('.thumbnails'); 
 
var preview = document.querySelector('.preview'); 
 

 
thumbnail.addEventListener("click", function(e) { 
 
    if (e.target.tagName == "IMG") { 
 
    preview.src = e.target.src; 
 
    } 
 
}, false);

.gallery { 
 
    text-align: center; 
 
} 
 

 
.preview { 
 
    width: auto; 
 
    max-width: 100%; 
 
} 
 

 
.thumbnails { 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
} 
 

 
.thumbnails img { 
 
    cursor: pointer; 
 
    height: 70px; 
 
}

<div class="gallery"> 
 
    <img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg" class="preview"> 
 
    
 
    <div class="thumbnails"> 
 
    <img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9a/44/23/9a4423324fe1fcc23c436a91ad4c9667.jpg"> 
 
    <img src="http://www.earthtouchnews.com/media/734889/Baby_bears_2014-11-25.jpg"> 
 
    <img src="http://i.imgur.com/wYFHJNI.jpg"> 
 
    </div> 
 
</div>

來源

2016-05-04 17:42:26

在orde中的可點擊事件顯示圖像

回答

相關問題