Question

我有一些图像：visibility:hidden和onClick事件，可将其可见性设置为visible。图片的ID为Img_(somenumber)

如何在一个图像可见时隐藏所有其他图像？

Answer 1

使用jquery，您可以尝试以下方法：

将类添加到要操纵其可见性的图像集中。例如

然后，对于每个图像，您可以进行以下onclick事件：

<img src="{img_src}" class="myImages" onclick="$('img.myImages').hide(); $(this).show();" />

当然，上述内容要求您更改每个图像标记。

如果你不能这样做（大量图像），那么尝试使用在文档加载时触发的函数，并为每个图像的'onclick'事件添加处理程序。再次使用jquery或其他js库轻松实现这一点。

Answer 2

有很多方法可以做到这一点。我很确定你会想要更多地思考它。但是，没有jQuery的答案。将此添加为onClick处理程序。确保传递this关键字。

<img onclick="toggleVisible(this);" src="" />

在您的页面中包含此功能：

function toggleVisible(clickedLI) {
    var imgs = document.getElementsByTagName('img');
    var i = imgs.length;
    while (i--) {
        var img = imgs[i];
        if (img.id.indexOf('Img_' == 0)) { 
            img.style.visibility = img.parentNode == clickedLI ? 'visible' : 'hidden';
        }
    }
}

您将遇到的第一个问题是无法恢复隐藏的图像。它们在那里，占用文档中的空间，但它们不会响应点击事件（至少不在Chrome中。）考虑在您的问题中提供更多细节。正如andreas所说，如果你有很多图像，那就有更有效的方法。

图像可见性一

2 个答案: