1

我想知道是否有人能弄清楚为什么我的功能无法正常工作。我想要实现的是当一个按钮被点击时它会显示文本，当它再次被点击时它会隐藏它等等。

function hideshow (){
    var showhide=document.getElementById('text');
    if(showhide.style.display="none")
    {
        showhide.style.display="block";
    }
    else{
        showhide.style.display="none";
    }
}

到目前为止，当我单击它一次时，我让它显示我的文本，但是一旦我再次单击它，它对文本没有影响。

4

5 回答 5

2

我认为应该是：

function hideshow (){
    var showhide = document.getElementById('text');
    if (showhide.style.display == "none")
    {
        showhide.style.display = "block";
    }
    else{
        showhide.style.display = "none";
    }
}

因此，比较时使用“==”而不是“=”。'=' 运算符分配一个值。在 javascript 中还有 '===' 运算符。不同之处在于 '==' 将转换值，而 '===' 将严格比较。

例如：

0 == false; // will return true
0 === false; // will not

所以你也可以使用

if (showhide.style.display === "none")

您可以在此处阅读有关运算符的更多信息。

于 2012-07-10T15:48:47.910 回答
1

你应该===在你的if陈述中使用。=是赋值运算符：

function hideshow (){
    var showhide=document.getElementById('text');
    if(showhide.style.display==="none")
    {
        showhide.style.display="block";
    }
    else{
        showhide.style.display="none";
    }
}

或者：

function hideshow (){
    var showhide=document.getElementById('text');

    showhide.style.display = showhide.style.display === "none" ? 
        "block" : 
        "none";  
}
于 2012-07-10T15:46:17.660 回答
1

您应该使用比较运算符==，而不是使用运算符分配值=。

尝试：

function hideshow() {
    var showhide = document.getElementById('text').style;
    (showhide.display = showhide.display == "none" ?  "block" : "none" )
}

您可以使用以下语句在一个语句中分配和比较：

(showhide.display = showhide.display == "none" ?  "block" : "none" )
                  ^assign            ^comparison

演示：http: //jsfiddle.net/7Eaf2/

于 2012-07-10T16:01:02.993 回答
0 
function hideShow() {
    el.style.display != "none" ? "none" : "block";
}
于 2012-07-10T15:47:51.183 回答
0 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function hideshow() {
            var showhide=document.getElementById('text');
            if(showhide.style.visibility=="hidden")
            {
                showhide.style.visibility="visible";
            }
            else{
                showhide.style.visibility="hidden";
            }
        }
    </script>
</head>
<body>
    <div id="text">Text</div>
    <button onclick="hideshow()">hideshow</button>
</body>
</html>
于 2012-07-10T15:55:44.510 回答