Question

我有一个图片库，在图片上单击图像正在使用此代码进行扩展：

var quadimages = document.querySelectorAll("#quad img");
for(i=0; i<quadimages.length; i++) {
  quadimages[i].addEventListener('click', function(){ this.classList.toggle("expanded")}); 
}

这工作正常 - 当点击图库中的一个图像时，图像会扩展，但是如何将之前的图像扩展为恢复为默认尺寸？

<div id="quad">
  <img src="images/gallery/Homes/homes01.jpg">
  <img src="images/gallery/Homes/homes02.jpg">
  <img src="images/gallery/Homes/homes03.jpg">
  <img src="images/gallery/Homes/homes04.jpg">
</div>

Answer 1

但是如何才能使之前扩展的图像返回这是默认大小

 quadimages[i].addEventListener('click', function(){ 
         $("#quad img").removeClass('expanded');
         this.classList.toggle("expanded")});

Answer 2

对整个事物使用jquery（涉及重写一些工作代码）：

var images = $("#quad img");
images.on('click', function() {
    images.removeClass('expanded');
    $(this).addClass('expanded');
});

不使用jquery（基于现有代码，并跟踪最后一个元素，而不是总是切换所有元素）：

var quadimages = document.querySelectorAll("#quad img");
var lastClicked;
for(i=0; i<quadimages.length; i++) {
    quadimages[i].addEventListener('click', function(){
        this.classList.toggle("expanded");
        if (lastClicked) {
            lastClicked.classList.toggle('expanded');
        }
        lastClicked = this;
    });
}

另一个非jquery版本，在单击同一图像时行为略有不同

var quadimages = document.querySelectorAll("#quad img");
for(i=0; i<quadimages.length; i++) {
    quadimages[i].addEventListener('click', function(){
        var ex = document.querySelectorAll("#quad img.expanded");
        if (ex.length) {
            if (ex[0]!=this) {
                ex[0].classList.remove('expanded');
            }
        }
        this.classList.toggle("expanded");
    });
}

Answer 3

var quadimages = document.querySelectorAll("#quad img");
for(i=0; i<quadimages.length; i++) {
  quadimages[i].addEventListener('click', function(){ 
  $('.expanded').removeClass('expanded');
  this.classList.toggle("expanded")}); 
}

试试这个，我希望它适用于你的情况。：）

单击时展开图像

3 个答案: