javascript - 为什么按钮必须点击两次才能起作用？

Question

我是编程新手，我想写一些有3个按钮来分别控制3个隐藏图像的显示的东西。当我单击第一个按钮时，图像立即出现，但必须单击两次才能显示第二个图像。 有人可以帮忙吗？

这样我就有3个按钮

<input type="image" img src="1.png" id="a1" href="javascript:;" onclick="change()">
<input type="image" img src="2.png" id="a12" href="javascript:;" onclick="change2 ()">
<input type="image" img src="3.png" id="a13" href="javascript:;" onclick="change3 ()">

3张图片默认为“display: none”

以及下面的 javascript 部分

<script>
var isShow = false;
function change() {
if(!isShow) {
    isShow = true;
    document.getElementById('d1').style.display='';

}
else  
{document.getElementById('d1').style.display='none';

}

function change2 () {
if(!isShow) {
    isShow = true;
    document.getElementById('d2').style.display='';


}
else {
    isShow = false;
    document.getElementById('d2').style.display='none';

}
}


function change3 () {
if(!isShow) {
    isShow = true;
    document.getElementById('d3').style.display='';


}
else {
    isShow = false;
    document.getElementById('d3').style.display='none';

}
}
</script>

如有任何建议，我们将不胜感激

Answer 1

为了只处理每个对象的一个​​条件，sou 可以附加一个 property ，比如说，'displayed' 给每个人，然后使用它。让我们举一个与第一个按钮相关的示例，但对于其他两个按钮来说完全是相同的事情

document.getElementById('d1')['displayed'] = false;

function change() {
    var isShow = document.getElementById('d1')['displayed'];
    if(!isShow) {
            document.getElementById('d1').style.display='';
            document.getElementById('d1')['displayed'] = true;
    }
    else {
            document.getElementById('d1').style.display='none';
            document.getElementById('d1')['displayed'] = false;         
    }
}

但这只是教学性的，正如 xEterno 提到的，您应该熟悉 jquery。