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

【问题标题】：Using toggleClass to toggle between image heights, 250px - 450px?使用toggleClass在图像高度之间切换，250px - 450px？
【发布时间】：2017-03-28 14:18:05
【问题描述】：

我正在建立一个非常注重形象的网站，一个投资组合网站。

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

图像加载在名为#imageGallery 的 div 中，我想了解拥有一个按钮的最佳方法，一旦单击该按钮，将添加/切换/删除一个类，该类会将 div 中的所有图像调整为 450px .

【问题讨论】：

见classList.toggle:developer.mozilla.org/en/docs/Web/API/Element/classList（或者，如果你使用jQuery，toggleClass:api.jquery.com/toggleclass）
如果你使用 jQuery why not read the API docs?

标签： javascript jquery html css image

【解决方案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>

【讨论】：

谢谢。这是一种享受，它已经被插入并且运行良好。

【解决方案2】：

我假设所有缩略图都有相同的类名。切换按钮时，您可以使用 jquery 和 toggle a class 为这些元素选择所有缩略图。

function buttonClick(e) {
  var thumbnails = $('.thumbnail');
  thumbnails.toggleClass('.large-image');
}

【讨论】：

【解决方案3】：

我不会在每个元素上放置一个类，我会将类放在父元素上，并使用基于该类的 CSS 规则来更新高度。

.grid-item { height: 250px; }
.expanded .grid-item { height: 450px; }

和类的切换相比

$("button").on("click", function () {
    $("#imageGallery).toggleClass("expanded");
});

或原版JS

document.getElementById("buttonId").addEventListener("click", function() {
   document.getElementById("imageGallery").classList.toggle("expanded"); 
});

【讨论】：

【解决方案4】：

看 ma - 没有 JavaScript（诚然，它也不是最漂亮的 HTML ...但它可以工作）。

ul.gallery {
    list-style-tye: none;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}

ul.gallery img {
    height: 100px;
}

input#sizing:checked ~ ul img {
    height: 200px
}

input#sizing {
    display: none;
}

<input type="checkbox" id="sizing"><label for="sizing">Display in Large</label>
<ul class="gallery">
    <li><img src="https://s-media-cache-ak0.pinimg.com/originals/51/32/15/513215ec15a8596180e19a7a18ddcea0.jpg"></li>
</ul>

【讨论】：