单击任何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

编辑

从jsfiddle删除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;
}

同样在您的帖子中此行应更正->

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加载后，执行此操作window.onload = ...