Javascript 重置类中所有图像的大小

我已经在论坛上搜索过了，但是我没有找到像这样的东西

我有一个页面设置了一堆图像（图库类型的东西），当用户点击一个图像时，它的大小将从200x200缩略图更改为全尺寸600x600

我的问题是，你可以继续点击这些图片，而之前的图片将保持放大状态。我想将扩展图像的数量限制为一个。 这是javascript：

function toggleSize(image) {
if (image.style.width != "600px") {
image.style.width = "600px";
image.style.height = "600px";
} else {
image.style.width = "200px";
image.style.height = "200px";
}

每个图像的html如下所示：

<img class="galleryImage" src="../m/54.jpg" onclick="toggleSize(this)" />

因此，从理论上讲，我希望galleryImage类的每个元素都重置为其原始宽度和高度200x200

---

如果有任何帮助，我们将不胜感激。

您可以使用并通过循环结果，使用给定的类搜索所有图像（并放弃当前图像），将它们恢复到开始状态

返回具有任何给定值的所有子元素的数组 类名。在document对象上调用时，完整的文档 将搜索，包括根节点。你也可以打电话 任何元素上的GetElementsByCassName（）；它将只返回元素 它们是具有给定 类名

之后，您可以调用切换函数

代码：

---

演示：

这是一个jquery解决方案，代码未经测试。但是图像大小调整将如您所期望的那样工作

function toggleSize(image) {
    // Get the current image size
    var currentImageHeight = $(image).height();

    // If it is 600, that means user clicked on a enlarged thumbnail
    // Just resize it
    if(currentImageHeight == 600){
        $(image).width(200);
        $(image).height(200);
    }
    // User clicked on other thumbnail. Resize previously enlarged thumbs
    else{
        $('.galleryImage').width(200);
        $(image).width(600);
        $(image).height(600);
    }
}

function resetImages(classToFind, image) {
    var elems = document.getElementsByClassName(classToFind);
    if (!elems) return;
    for (var i = elems.length - 1; i >= 0; i--) {
        var elem = elems[i];
        if (elem === image) continue
        elem.style.width = "200px";
        elem.style.height = "200px";
    }
}

function toggleSize(image) {
    resetImages('galleryImage',image);
    if (image.style.width != "600px") {
        image.style.width = "600px";
        image.style.height = "600px";
    } else {
        image.style.width = "200px";
        image.style.height = "200px";
    }
}

function toggleSize(image) {
    // Get the current image size
    var currentImageHeight = $(image).height();

    // If it is 600, that means user clicked on a enlarged thumbnail
    // Just resize it
    if(currentImageHeight == 600){
        $(image).width(200);
        $(image).height(200);
    }
    // User clicked on other thumbnail. Resize previously enlarged thumbs
    else{
        $('.galleryImage').width(200);
        $(image).width(600);
        $(image).height(600);
    }
}