如何通过单击HTML按钮隐藏和显示图像
如何通过单击HTML按钮隐藏和显示图像
提问于 2018-05-28 08:13:13
当我点击任何字母按钮时，我会尝试按照字母字符来更改图像。
HTML
<div id="btn">
<input type="button" onclick="hideImage();" value="A" class="btn-group" />
</div>
<div id="images">
<img src="Letter-A.png" class="image-group"></img>
</div>JavaScript
function hideImage() {
var button = document.getElementsByClassName("btn-group");
document.getElementsByClassName('image-group').onclick = function() {
if (button.style.display == "none") {
button.style.display = "block";
} else {
button.style.display = "none";
}我得到一个错误"display“属性不能设置为未定义。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-28 09:27:56
称为 or 的getElementsByClassName() gathers 。为了引用NodeList/HTMLCollection中的每一项，我们必须使用for循环遍历每一项，或者将NodeList转换为数组，然后对其使用数组方法。
下面的Demo使用的是后者(一个数组方法)；
将每个NodeList转换为数组的
- 数组方法循环访问数组并在每个
button.btn上分配一个onclick事件处理程序根据数组的当前索引位置将每个事件处理程序/button.btn关联到相应的img.img。
提供了
- 每个图像的实际显示/隐藏行为
演示
在演示中评论的详细信息
/* Collect all .btn classes into a NodeList and comvert it into
|| an array
*/
var btnGroup = Array.from(document.getElementsByClassName("btn"));
/* Collect all .img classes into a NodeList and convert it into
|| an array
*/
var imgGroup = Array.from(document.getElementsByClassName('img'));
/* Iterate (loop) thru the imgGroup array with forEach() array
|| method.
*/// In each loop get a .btn from the btnGroup array's index
//// position that corresponds with the current index of the loop.
//// Register an onclick event handler that toggles the .off class
//// to a .img of the imgGroup array positioned at current loop
//// index.
imgGroup.forEach(function(img, idx) {
btnGroup[idx].onclick = function() {
img.classList.toggle('off');
}
});.off {
display: none;
}<div id="btn-group">
<input type="button" value="A" class="btn" />
<input type="button" value="B" class="btn" />
<input type="button" value="C" class="btn" />
<input type="button" value="D" class="btn" />
<input type="button" value="E" class="btn" />
</div>
<div id="img-group">
<img src="https://www.luckyclovertrading.com/images/LBL14CG_A_a.jpg" class="img" width='100'>
<img src="https://etc.usf.edu/presentations/extras/letters/theme_alphabets/26/12/B-400.png" class="img" width='100'>
<img src="https://etc.usf.edu/presentations/extras/letters/fridge_magnets/orange/13/C-400.png" class="img" width='100'>
<img src="https://etc.usf.edu/presentations/extras/letters/varsity_letters/37/16/D-400.png" class="img" width='100'>
<img src="https://images-na.ssl-images-amazon.com/images/I/31ETtJ6FG6L.jpg" class="img" width='100'>
</div>
Stack Overflow用户
发布于 2018-05-28 08:54:44
我假设您有一个按钮和图像列表，其中唯一的区别是字母表字母。在这种情况下，您可以这样做。
let btns = document.getElementsByClassName('btn-action')
for(let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
hideImage(btns[i].value);
})
}
function hideImage(letter){
let id = "image-" + letter;
let img = document.getElementById(id)
if(img.style.display === "none") {
img.style.display = "block";
}
else {
img.style.display = "none";
}
}<div id="btn">
<input type="button" value="A" class="btn-group btn-action"/>
</div>
<div id="images">
<img src="Letter-A.png" id="image-A" class="image-group">
</div>
请避免使用内联HTML事件属性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50557647
复制相关文章
相似问题