javascript - 使用 toggleClass 在图像高度 250px - 450px 之间切换？

Question

我正在建立一个图片非常重的网站，一个投资组合网站。

我有一个砖石类型的画廊，默认情况下每张图片的高度都设置为 250 像素。我希望创建一个超链接/按钮，让用户决定是否要以正常大小 (250px) 或更大的大小 (450px) 查看图像。

图像被加载到一个名为 #imageGallery 的 div 中，我想了解最好的方法是让一个按钮一旦被点击，将添加/切换/删除一个类，该类将调整所有的大小div 中的图像到 450px。

Answer 1

似乎是 toggleClass jQuery 函数的基本用法。

$('#toggleBtn').click(function(){
  $('.item').toggleClass( "expand" );  
});

.item{
  height:250px;
}
.expand{
  height:450px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleBtn">toggle</button>
<div id="imageGallery">
  <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAbcF7stPcRmmZxkwuyoPewIEvnYQZvvTJ_f79-ZJ0TFsCn5NJUQ" />
  <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAbcF7stPcRmmZxkwuyoPewIEvnYQZvvTJ_f79-ZJ0TFsCn5NJUQ" />
</div>