javascript - 如何通过在 Handlebars 中单击来增加图像的大小？

Question

我将 node.js 与 handlebars 模板引擎一起使用。目前，数据库中的缩略图显示在代码中指定的宽度和高度 70。见下文。如何允许用户单击 Handlebars 中的图像并查看更大的照片再现？当前的图像太小，看不到，但我只希望在单击它们时将它们放大。

我正在使用 handlebars....所以这个的变体会有所帮助...(没有“onClick=”方法，因为我使用的是 node.js，它不会工作)

<style>
img.std {
    height: 10%;
}
img.big {
    height: 40%;
}
</style>

<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">

Answer 1

您可以添加 IIFE 类型的函数，并使用箭头函数，以便 this 关键字引用图像:

.container{
   height: 200px;
   border: solid 1px gray;
}

img.std {
  height: 60%;
}

img.big {
  height: 80%;
}

<div class="container">
  <img id="img" class="std" onClick="(() => {
      this.className = this.className === 'std' ? 'big' : 'std';
    })(); return false;" src="http://placekitten.com/200/200">
</div>