javascript - html元素形式的条件显示

标签 javascript conditional visibility

好吧,在对 javascript 进行了一个小时的介绍之后,我想出了以下代码。它很好地完成了我想要的,但后来我想要别的东西,但它不起作用。

我希望在点击一个按钮时,某个字段会隐藏,然后点击另一个是的,另一个也会隐藏,但是,当然,它必须显示另一个,否则我们将一无所获目的是根据用户点击的内容(在单选按钮上)显示不同的字段所以我以一种幼稚的方式编写了我的代码并且它起作用了。但后来我想到我首先要隐藏两个字段而不是显示两个字段,这就是问题所在。我在“告诉它”函数的参数中添加了一个 0 值,当 x = 0 时,可见性 = 隐藏。但它不会听我的!所以,当它说 x = 1 和 2 时,代码的那一部分有效,关于 0 的那部分无效。

这是一个如此简单的代码,可以让人微笑,但见鬼的是,它很干净而且可以工作。有谁知道如何在单击按钮之前隐藏字段?

非常感谢我删除了 HTML 的一些标签

<html>
    <head>
        <script language="javascript">
            var x = 0;

            function hola(x) {
                if(x == 0) {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="hidden";
                }

                if(x == 1) {
                    document.getElementById("cont1").style.visibility="visible";
                    document.getElementById("cont2").style.visibility="hidden"; 
                }

                if(x == 2)  {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="visible"; 
                }
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
        <div id="cont1">
            <input type="text">
        </div>

        <input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

        <div id="cont2">
            <input type="text">
        </div>
    </body>
<html>

最佳答案

什么有效:

您有两个按钮,都在开始时可见。点击一个按钮,你就隐藏了一个div , 并使另一个可见。

现在您需要一种情况,即 div 应该在开始时隐藏,然后在您单击按钮时显示。

默认情况下,对于显式 visibility 的所有元素未给出属性,visibility被认为是 visible .

要使按钮不可见,需要添加visibility:hidden到按钮。

有两种方式:

  1. 在代码中为div s,然后通过添加“默认情况下不可见” style='visibility:hidden' .

  2. 添加另一个在加载页面时调用的 javascript 函数,并使两个 div 不可见:

    function hideBoth()  {  
       document.getElementById("cont1").style.visibility="hidden";  
       document.getElementById("cont2").style.visibility="hidden";   
    }
    

在加载页面时调用它:<body onload='hideBoth()'>

关于javascript - html元素形式的条件显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3961422/

相关文章:

javascript - Alfresco:工作流程脚本失败取决于文件夹级别

javascript - Backand 注册返回 XMLHttpRequest 无法加载 https ://api. backand.com/user/signup

java - ImageView 将可见性从消失更改为可见后不显示图像

qt - 在 QScrollArea 内的 QVBoxLayout 中为最初隐藏的小部件保留空间

javascript - 在 lodash 中将 _.set 与 _.each 一起应用

php - 如何在网页之间传递 '&amp;'数据

string - Ansible:意外的模板类型错误:预期的字符串或缓冲区

python - 使用条件在 Pandas 数据框中生成新列

python - 在 if 中定义变量

c# - 将 UI 从 CLI 更改为 WPF