車把點擊顯示圖像和編號

Question

我有一個縮略圖圖像和相應的編號菜單。

當我點擊縮略圖時，會顯示適當的大圖。

當我點擊數字時，正確的圖像號碼顯示在屏幕底部的小菜單中。

我想要做的就是這樣，當我點擊縮略圖顯示正確的圖像和以及正確的數量都在點擊這個組合代碼。

所以總結一下，我希望能夠點擊縮略圖來顯示正確的圖像和編號。

這可能嗎？

JS

var thumbs = document.getElementsByClassName("thumbnails"); 

for(var i=0; i<thumbs.length; i++) { 
    thumbs[i].onclick = function(){ 
     document.getElementById("full-screen-image").src = this.src; 
    } 
} 

var resourceNumber = document.getElementsByClassName("resource-number"); 

for(var i=0; i<resourceNumber.length; i++) { 
    resourceNumber[i].onclick = function(){ 
     document.getElementById("resource-number-menu").innerHTML = this.innerHTML+"/6"; 
    } 
} 

HTML

<div id="asset-being-presented" class="xlarge-12"> 
     <img id="full-screen-image" class="classroom-view-full-screen-image" src="{{resources.0.imgSrc}}"></img> 
    </div> 
    <div class="toolbar" id="resource-number-menu"> 
     {{resources.0.number}}/6 
    </div> 

{{#each resources}} 
     <div class="resource-number">{{number}}</div> 

     <div class="classroom-view-content-placeholder"> 
      <img class="thumbnails" src="{{imgSrc}}"></img> 
     </div> 
    {{/each}} 

JSON

{ 
    "lesson-title": "Lesson title", 
    "contentType": "Activity resources", 
    "resources": [ 
     { 
      "number": "1", 
      "title": "Friction: Glossary visual", 
      "type": "image", 
      "content-type": "Visual", 
      "active": "jump-to-reveal-active", 
      "first": "first", 
      "imgSrc": "/assets/img/Frictionglossaryvisual.jpg" 
     }, 
     { 
      "number": "2", 
      "title": "this is the image title", 
      "type": "image", 
      "content-type": "Visual", 
      "imgSrc": "/assets/img/626591746.jpg" 
     }, 

     { 
      "number": "3", 
      "title": "this is the image title", 
      "type": "image", 
      "content-type": "Visual", 
      "imgSrc": "/assets/img/90094877.jpg" 
     }, 
     { 
      "number": "4", 
      "title": "this is the image title", 
      "type": "image", 
      "content-type": "Visual", 
      "imgSrc": "/assets/img/Frictionglossaryvisual.jpg" 
     }, 
     { 
      "number": "5", 
      "title": "this is the image title", 
      "type": "image", 
      "content-type": "Visual", 
      "last": "last", 
      "imgSrc": "/assets/img/626591746.jpg" 
     } 
    ] 
} 

Answer 1

有這種不同的方式嘗試劇本在這第一個for循環點擊 的document.getElementById（「全-screen-image「）。src = this.src; 的document.getElementById（ 「資源數菜單」）的innerHTML = this.innerHTML + 「/ 6」。