Javascript 如何通过在把手中单击图像来增加图像的大小？

我将node.js与Handlebar模板引擎一起使用。目前，来自数据库的缩略图以代码中指定的70的宽度和高度显示。见下文。如何允许用户单击把手中的图像并查看照片的更大格式副本？ 当前的图像太小，看不见，但我只希望在单击它们时增加它们

我使用的是车把……因此，这种方法的一种变体将有助于……（如果没有“onClick=”方法，因为我使用的是node.js，它将无法工作）

img.std{
身高：10%；
}
大号{
身高：40%；
}

使用jQuery，您可以非常轻松地完成这项工作：

$(document).on('click','img',function(){
   if (this.id == "img") {
       this.className=='std' ? this.className = 'big' : this.className='std';
   }
});

<img id="img" class="std" src="/uploads/{{photo_image}}">

$（文档）。在（'click'，'img'，function（）上{
如果（this.id==“img”）{
this.className='std'？this.className='big'：this.className='std'；
}
});

---

我建议为标签使用唯一id，以避免将来出现歧义（潜在的bug）

以下是对代码实施的复选框攻击：

.imgcontainer{
位置：相对位置；
显示：内联flex；
对齐项目：拉伸；
证明内容：拉伸；
}
.imgcontainer输入[type='radio']{
不透明度：0；
位置：绝对位置；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
.img容器输入[type='radio']+img.std{
高度：自动；
宽度：100px；
}
.img容器输入[type='radio']：选中+img.std{
宽度：200px；
}

---

您可以添加IIFE类型函数，并使用箭头函数，以便

此

关键字引用图像：

.container{
高度：200px；
边框：实心1px灰色；
}
img.std{
身高：60%；
}
大号{
身高：80%；
}

你能不能只使用

img:active{height:40%}

在获得焦点时调整大小？好吧，据说

：active

不处理图像，也许你需要一些CSS复选框黑客来解决这个问题，而不使用javascript。active可以工作，但不是我认为的方式：CSS复选框黑客是一种方式。给我一个“复选框黑客”的例子 please@TahaPaksuHere：它使用

：checked ~

选择器来选择所选和可视隐藏复选框的同级。这就是为什么它被称为hack。我应该把jquery代码放在哪个确切的文件中？应该放在main.js/app.js文件还是gigs.handlebar文件中$（document）.on（'click'，'img'，function（）{if（this.id==“img”）{this.className=='std'？this.className='big'：this.className='std'；}}）；

$(document).on('click','img',function(){
   if (this.id == "img") {
       this.className=='std' ? this.className = 'big' : this.className='std';
   }
});

<img id="img" class="std" src="/uploads/{{photo_image}}">