重置大小

Question

我搜索论坛已经但我无法明确找到这样的事。

我有一个设置了一些图片，（外廊式的东西），并在图像上，他们用户点击它就会尺寸从200x200的缩略图更改为全尺寸600×600的页面。

我的问题是一个可以继续点击这些图片和前一个将保持放大。我想将展开图片的数量限制为一个。 这是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); 
    } 
}