Question

我已经搜索了论坛，但我找不到这样的具体内容。

我的页面设置了一堆图像（图库类型的东西），当用户点击图像时，它会将尺寸从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类看起来像这样：

.galleryImage {
margin: -2px -2px -3px -2px;
width: 200px;
height: 200px;
}

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

非常感谢任何帮助。

Answer 1

您可以使用getElementsByClassName搜索给定类的所有图像（并丢弃当前的图像），然后将结果循环恢复到开始状态。

返回具有任何给定内容的所有子元素的数组班级名称。在文档对象上调用时，完整的文档搜索，包括根节点。你也可以打电话任何元素上的getElementsByClassName（）;它只返回元素它们是具有给定的指定根元素的后代班级名称。

在此之后，您可以调用切换功能。

代码：

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";
    }
}

演示：http://jsfiddle.net/IrvinDominin/DfSbT/

Answer 2

这是一个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);
    }
}

重置班级中所有图像的大小

2 个答案: