Javascript 按Div Id显示/隐藏

我在表单中有几个字段，如果用户单击一个字段，我希望显示一个表，否则如果他们单击另一个字段，表应该隐藏

我尝试了此javascript，但当单击其他字段时，它不会隐藏表：

<script>
function myFunction() {
    if (document.getElementById("userform")) {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

</script>   

---

因为Jquery是标记之一，所以我在Jquery中投入了一分钱

.hide（）/
.show（）
隐式地将css中的
dislay
设置为
block
或
none

$(function(){
 $('#close').on('click',function(){
   $('#danceforme').hide();
 });
 $('#open').on('click',function(){
   $('#danceforme').show();
 });
});

html

停止跳舞
为我跳舞
我在跳舞

---

演示：

因为Jquery是标签之一，所以我在Jquery中投入了一分钱

.hide（）/
.show（）
隐式地将css中的
dislay
设置为
block
或
none

$(function(){
 $('#close').on('click',function(){
   $('#danceforme').hide();
 });
 $('#open').on('click',function(){
   $('#danceforme').show();
 });
});

html

停止跳舞
为我跳舞
我在跳舞

---

演示：

您已经标记了

jQuery

，因此在这种情况下，它将

$("#id").show();

$("#id").hide();

---

您已经标记了

jQuery

，因此在这种情况下

$("#id").show();

$("#id").hide();

---

Doniyor的答案对于jQuery来说非常好。我想帮助您解释如何使您现有的代码工作，因为这将帮助您理解为什么它不工作，而不仅仅是给您一个解决方案

简单解 myFunction（）的问题在于if语句-

if (document.getElementById("userform"))

检查DOM中是否存在ID为“userform”的元素。如果是，则该语句返回true。因为在您提供的HTML中有一个ID为“userform”的输入，所以它总是正确的

相反，您需要检查触发函数的元素是否具有ID“userform”

因此，相关的HTML如下所示：

<div class="form-group">
    <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
        <div class="col-sm-10">
            <input type="tel" class="form-control" id="userform"
             placeholder="Enter your unique Pi identity"  onclick="myFunction(this)" />
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword1" class="col-sm-1 control-label">
             <b>Password</b>
        </label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword1"
            placeholder="Password" onclick="myFunction(this)"/>
        </div>
    </div>

function myFunction(obj) {
    if (obj.id == "userform") {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

。因为您是通过html注册onclick的，而不是在脚本中注册，所以触发元素不会成为函数的所有者，这就是

所指的
。因此，我们必须通过一个参数传递对象，并检查该对象的ID

当然，这是非常复杂的，因为您已经在使用jQuery和bootstrap，所以您可能不想手动显示和隐藏内容

Bootstrap+jQuery高级解决方案
您试图显示/隐藏的div是，引导程序已经为其提供了功能


说明：首先，我删除了折叠元素中的
style=“display:none”
和类
。折叠中的类
告诉引导程序默认显示元素，而
display:none
覆盖引导程序的样式。使用
class=“collapse”
就足够了，默认为折叠或隐藏

接下来，我删除了
onclick
赋值，因为我们将让引导处理这个问题

最后，我用一个脚本替换了现有的脚本行为，该脚本告诉引导程序我们想要的行为：

$("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
$("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});

我将警报留作调试，在您不确定发生了什么时总是有帮助的

那么这是在做什么？接下来，我们希望在单击“userform”元素时显示折叠

首先，我们告诉jquery，当id为
userform
的元素获得焦点时，我们想做些什么。这是
$（“#userform”）.focusin（）

然后，我们告诉jquery发生这种情况时我们要做什么——我们可以指定一个命名函数，比如
myFunction（）
，但在本例中，它只是一行，所以我们创建一个内联函数。这就是
函数（）{}

在该函数中，我们指定了所需的引导行为。从中，我们知道可以使用函数
collapse（“show”）
手动展开collapse元素。为了告诉Bootstrap哪一个，我们只需给jQuery元素id！加在一起就是
$（#userinfo”）.collapse（“show”）

将它放在被触发的函数中，这是在我们的
focusin（）
函数中指定的，我们得到最终结果：`$（“#userform”）.focusin（function（）{$（“#userinfo”）.collapse（“show”）}）

接下来，我们对要触发的元素执行相同的操作，以隐藏折叠元素。因此，我们只需修改
#inputPassword1
的那一行，并告诉它使用
折叠（“隐藏”）
而不是
“显示”
来隐藏折叠。合乎逻辑，对吗

我发现在编写类似这样的行为时，查阅文档非常有帮助。通常会有一些我想做的事情的例子，只需要稍微调整就可以在我的网站上工作



当你在这方面寻求帮助时，如果你能创建一个解决方案，将问题与你制作的网站的复杂性隔离开来，那就太好了。然后，其他想要帮助的用户可以创建代码的修改副本来显示。这非常有用

干杯。
Doniyor的回答对jQuery来说非常好。我想帮助您解释如何使您现有的代码工作，因为这将帮助您理解为什么它不工作，而不仅仅是给您一个解决方案

简单解
myFunction（）的问题在于if语句-

if (document.getElementById("userform"))

检查DOM中是否存在ID为“userform”的元素。如果是，则该语句返回true。因为在您提供的HTML中有一个ID为“userform”的输入，所以它总是正确的

相反，您需要检查触发函数的元素是否具有ID“userform”

因此，相关的HTML如下所示：

<div class="form-group">
    <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
        <div class="col-sm-10">
            <input type="tel" class="form-control" id="userform"
             placeholder="Enter your unique Pi identity"  onclick="myFunction(this)" />
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword1" class="col-sm-1 control-label">
             <b>Password</b>
        </label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword1"
            placeholder="Password" onclick="myFunction(this)"/>
        </div>
    </div>

function myFunction(obj) {
    if (obj.id == "userform") {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}


。因为您是通过html注册onclick的，而不是在脚本中注册，所以触发元素不会成为函数的所有者，这就是
所指的
。因此，我们必须通过一个参数传递对象，并检查该对象的ID

当然，这是非常复杂的，因为您已经在使用jQuery和bootstrap，所以您可能不想手动显示和隐藏内容

Bootstrap+jQuery高级解决方案
您试图显示/隐藏的div是，引导程序已经为其提供了功能


说明：首先，我删除了
style=“display:none”