单击任何img时隐藏一类元素

Question

我正在尝试编写一个javascript来隐藏类“prewrap”的所有元素，当任何图像上 点击网页。

到目前为止

代码：

<script type="text/javascript">
function hidepre() {
    var elems = document.getElementsByClassName("prewrap");
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].style.visibility === "hidden") {
            elems[i].style.visibility = "visible";
        } else {
            elems[i].style.visibility = "hidden";
        }
    }
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = "hidepre()";
}
</script>

Jsfiddle：http://jsfiddle.net/aX5kQ/

但这根本不起作用，不知道出了什么问题？

Answer 1

您的代码正常运作，请查看此小提琴 DEMO

修改

从script中移除jsfiddle代码，只留下代码。

   function hidepre() { 
    var elems = document.getElementsByClassName("prewrap");
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].style.display === "none") {
            elems[i].style.display = "block";
        } else {
            elems[i].style.display = "none";
        }
    }
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = hidepre;
}

同样在你的帖子中，这一行应该更正 - ＆gt;

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = hidepre; //this line - here should only be the name of the function without quotes and parentheses 
}

Answer 2

如果你从jsfiddle的JS区域删除script标签（你把原始的javascript放在那里......没有标签），它就可以了。

在http://jsfiddle.net/aX5kQ/1/

编辑演示

Answer 3

嗨此代码在加载图像之前立即执行，因此没有找到img。

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = "hidepre()";
}

使用window.onload = ...

加载DOM时执行此操作