Question

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

这样我有3个按钮

void SomeMethod()
{
    var referrer = "some URL";
    web.PreRequest += (req){
        req.Referer = referrer;
        return false;
    };
}

3图像，默认为“display：none”

以及javascript部分

<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 ()">

任何建议都将不胜感激

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。

Answer 2

由于您不熟悉编程，请尝试以下方法：

我重新编写了你的函数，只使用一个函数，iam传递你想要显示/隐藏的元素的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”。所以，你必须再次点击。

既然你正在努力学习，我会让你想到另一种方法。

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

3 个答案: