点击显示图片，修改图片定位答案

【问题标题】：Show image on click, modifying image positioning点击显示图片，修改图片定位
【发布时间】：2014-10-05 03:04:21
【问题描述】：

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

HTML/Javascript：

    <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>

CSS：

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

但是，我还希望图像彼此重叠，这样如果选中两个，则第二个将出现在顶部。为了让图像重叠，我被告知我必须使用 CSS 样式（使用 z-index）和图像 CLASSES，而不是 ID。

所以，我只是将代码更改为使用 className 而不是 ID：

http://jsfiddle.net/tbqm1yeo/

HTML/Javascript：

    <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>

CSS：

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

但是，这不起作用（选中复选框时图像甚至不会出现）...我假设问题与使用类名有关？如果有人可以从第二个链接中获取代码（以便图像在检查时重叠并出现/消失），那就太好了。非常感谢。

【问题讨论】：

请编辑您的帖子，给它一个有用的标题。
您必须使用“document.getElementsByClassName”。您使用了“元素”而不是“元素”。 document.getElementsByClassName 将为您提供与类名匹配的 dom 对象数组。
检查这个小提琴：jsfiddle.net/tbqm1yeo/3

标签： javascript html css checkbox

【解决方案1】：

您只需使用位置absolute 即可解决您的问题。你原来的 JavaScript 没问题。

工作小提琴：http://jsfiddle.net/rpt8ck6L/2/

CSS：

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

#image002 { 
    z-index: 2 
}

【讨论】：