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

在第一次循环点击时，有不同的方法可以在脚本中尝试此操作 document.getElementById（＆＃34; full-screen-image＆＃34;）。src = this.src; document.getElementById（＆＃34; resource-number-menu＆＃34;）。innerHTML = this.innerHTML +＆＃34; / 6＆＃34 ;;

把手一键显示图像和数字

1 个答案: