Javascript 单击显示图像，修改图像定位

所以，这就是我想做的。。。我想创建一个清单，当选中一个框时，相应的图像就会出现（默认情况下，每个图像都被设置为隐藏）。以下是部分有效的代码：

HTML/Javascript：

但是，我也希望图像彼此重叠，这样，如果选中两个，则第二个图像将显示在顶部。为了让图像重叠，我被告知必须使用CSS样式（带有z索引）和图像类，而不是ID

因此，我只是将代码更改为使用className而不是ID:

HTML/Javascript：

---

但是，这不起作用（选中复选框时图像甚至不会显示）。。。我假设问题与使用类名有关？如果有人能让第二个链接的代码正常工作（这样图像在选中时会重叠并出现/消失），那就太好了。非常感谢。

您只需使用position

absolute

即可解决问题。您的原始JavaScript很好

工作小提琴：

CSS:

---

请编辑你的文章，给它一个有用的标题。你必须使用“document.getElementsByClassName”。您使用了“element”而不是“elements”。document.getElementsByClassName将为您提供一个与类名匹配的dom对象数组。请检查此FIDLE：

    <script>
        function toggleVisibility(id) {
            var el = document.getElementById(id);

            if (el.style.visibility == "visible") {
                el.style.visibility = "hidden";
            } else {
              el.style.visibility = "visible";
            }
         }
    </script>

<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
    <img id="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
    <img id="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>

.testclass {
    border: 1px solid #000;
    position: relative;
}
.img001 {
    border: 1px solid #f00;
    display: block;
    position: relative;
    z-index: 2;
}
.img002 {
    border: 1px solid #0f0;
    display: block;
    position: relative;
    z-index: 1;
    top: -12px;
    left: 12px;
}

    <script>
    function toggleVisibility(className) {
        var el = document.getElementByClassName(className);

        if (el.style.visibility == "visible") {
            el.style.visibility = "hidden";
        } else {
            el.style.visibility = "visible";
        }
    }
</script>
<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
    <img class="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
    <img class="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>

.testclass {
    border: 1px solid #000;
    position: relative;
}
.img001 {
    border: 1px solid #f00;
    display: block;
    position: relative;
    z-index: 2;
}
.img002 {
    border: 1px solid #0f0;
    display: block;
    position: relative;
    z-index: 1;
    top: -12px;
    left: 12px;
}

#img001, #img002 {
    width:200px;
    height:200px;
    position:absolute;
    top:80px;
    left:0px;
    z-index:1;
}

#image002 { 
    z-index: 2 
}