Javascript 图像可见性1

我有一些图像具有：

visibility:hidden

和一个

onClick

事件，该事件将其可见性设置为

visible

。图像的id为

Img(somenumber）

---

如何使一个图像可见时，所有其他图像都应隐藏？

使用jquery，您可以尝试以下操作：

• 将类添加到要操纵其可见性的图像集中。e、 g

然后，对于每个图像，您可以为onclick事件添加以下内容：

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

当然，以上要求您更改每个图像标记

---

如果无法执行此操作（大量图像），请尝试使用一个函数，该函数将在加载文档时触发，并为每个图像的“onclick”事件添加一个处理程序。同样，使用jquery或其他js库也可以轻松实现这一点。

有很多方法可以做到这一点。我很肯定你会想仔细考虑的。但是，对于没有jQuery的答案。将其添加为onClick处理程序。确保您传递了this关键字

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

---

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

如果可能的话，我想做简单的js，请看：html中有一个例子说明它是什么样子的，就是这样，唯一的问题是我不知道每个图像的确切ID，然后我知道它以“Img_”开头，对吗，这就是为什么onclick事件在“li”元素上，而不是在pic本身上，但有些东西不起作用：jQuery的问题是我已经有了原型。。它把事情搞砸了…啊，我不知道你把它们放在李上了。这里有一个固定的例子。

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