Javascript 把手一键显示图像和编号

我有一个菜单的缩略图图像和相应的数字

当我点击缩略图时，会显示相应的放大图像

当我点击数字时，正确的图像数字显示在屏幕底部的一个小菜单中

我想做的是合并这些代码，这样当我点击缩略图时，就会显示正确的图像和正确的数字，所有这些都只需点击一下

所以总结一下，我希望能够点击缩略图来显示正确的图像和数字

这可能吗

JS

---

有不同的方法可以实现此目的，请先在脚本中为循环单击尝试此方法 document.getElementById（“全屏图像”）.src=this.src；

---

document.getElementById（“资源编号菜单”）.innerHTML=this.innerHTML+“/6”

嗨，不幸的是，我试过了，但它没有显示数字。然后为图片和数字设置相同的类别我需要它们显示在不同的区域，所以当我设置相同的类别时，图像压缩到数字旁边，而不是显示为更大的图像。

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";
    }
}

<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}}

{
    "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"
        }
    ]
}