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

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张图片，默认为“显示：无”

及以下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可以为每个对象附加一个属性 （例如'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。

Answer 2

由于您是编程新手，请尝试以下操作：

我已经重写了您的函数，只使用了一个函数，即传递您要显示/隐藏的元素的ID。 而不是检查全局布尔值（true / false），而是检查元素是否隐藏：

function change(ids) {
var elem = document.getElementById(ids);
if(elem.style.display =='none') {
    elem.style.display='';
}
else{
    elem.style.display='none';
}

}

DOM：

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

根据@xEterno的建议，您可以使用jQUery实现此目的。

Answer 3

变量isShow是元凶。

根据您的逻辑，当调用change（）方法时，isShow的值将变为“ true”。

因此，在其他两种方法中，执行总是在第一次单击时转到“ else”部分，isShow变为“ false”。 因此，您将不得不再次单击。

因为您正在尝试学习，所以我会让您想到另一种方法。