画像を表示するためにordeのJavaScriptでクリック可能なイベント

写真がサムネイルと1つの大きな画像を含むフォトギャラリーを持っています。ユーザーがサムネイルをクリックすると、サムネイル画像が大きく表示されます。他のすべてが行われますが、JSを動作させることはできません。私はそれが何か小さいことを知っているので、誰かが見て、私が間違ってやっていることを見ることができますか？前もって感謝します。画像を表示するためにordeのJavaScriptでクリック可能なイベント

<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 ="サムネイル "を持つ要素がありません。" 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.querySelector(".thumbnail")

または

へ

だから、どちらかの変更...

document.getElementById("thumbnail")

<div id="thumbnail">

へ

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のJavaScriptでクリック可能なイベント

答えて

関連する問題