按Div ID显示/隐藏

Question

我在表单中有几个字段，如果用户单击一个字段，我想显示一个表，否则，如果用户单击另一个字段，则该表应该被隐藏。

我试过这个javascript，但是当单击其他字段时，它不会隐藏表格：

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

</script>   

在每个字段上，我在每种输入类型中都包含一个onclick="myFunction()" 。 该表设置为style="display:none"

这是HTML：

    <form class="form-horizontal" role="form">
        <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()">
            </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="()">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-sample btn-lg">
                    <b>Submit</b>
                </button>
            </div>
        </div>
    </form>





    <div id="userinfo" class="collapse in" style="display:none">
        <table class="table table-bordered" id="phone-table">
            <tbody>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            &nbsp;<br> <b>1</b>
                        </button>
                    </td>
                    <td class="col-md-1">
                        <button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>ABC<br>2
                            </b>
                        </button>
                    </td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>DEF<br>3
                            </b>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>GHI<br>4
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>JKL<br>5
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>MNO<br>6
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>PQRS<br>7
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>TUV<br>8
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>WXYZ<br>9
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>&nbsp;<br>0
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-eraser"></i><br>Clr</b>
                        </button></td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

由于Jquery属于标签，因此我将美分投入了jquery

.hide(); / .show(); 在CSS中隐式将dislay设置为block或none设置。

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

html

<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>

<div id="danceforme">
   I am dancing
</div>

演示： http : //jsfiddle.net/doniyor/5FT9x/

Answer 2

您还标记了jQuery因此在这种情况下

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

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

Answer 3

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>

myFunction（）看起来像这样：

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

jsFiddle

有关注册onclick事件的说明 。 因为你注册通过HTML的onclick，而不是一个脚本，触发元件不会成为功能，这是什么的所有者this将引用。 因此，我们必须通过参数传递对象，并检查该对象的ID。

当然，这都是非常round回的事情，并且由于您已经在使用jQuery和bootstrap，因此您可能不想手动显示和隐藏内容。

Bootstrap + jQuery花式解决方案

您要显示/隐藏的div是一个lapsed ，该bootstrap已经具有功能。

引导解决方案jsFiddle

说明：首先，我删除了style="display:none"并in折叠元素上进行了类化。 收起时的class in告诉bootstrap默认将元素设置为show，而display:none覆盖bootstrap的样式。 使用class="collapse" ，默认为折叠或隐藏。

接下来，我删除了onclick分配，因为我们将让引导程序处理该分配。

最后，我用告诉启动所需行为的脚本替换了现有的脚本行为：

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

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

那这是做什么的？ 按照Bootstrap的示例用法 ，我们希望在单击“ userform”元素时显示折叠。

首先，我们告诉jquery当id为userform的元素获得焦点时我们想做些事情。 通过jQuery API docs就是$("#userform").focusin() 。

然后，我们告诉jquery这种情况发生时我们想做什么-我们可以指定一个命名函数，例如myFunction() ，但是在这种情况下，它只是一行，所以我们创建了一个内联函数。 那是function(){} 。

在该函数内，我们指定所需的Bootstrap行为。 从Bootstrap文档中 ，我们知道我们可以使用功能collapse("show")来手动展开折叠元素。 为了告诉Bootstrap哪一个，我们只给jQuery元素id！ 在一起，就是$("#userinfo").collapse("show");

将其放入在focusin()函数中指定的触发函数中，我们得到最终结果：`$（“＃userform”）。focusin（function（）{$（“＃userinfo”）。collapse（“节目”）;}）;

接下来，对要触发隐藏隐藏元素的元素执行相同的操作。 因此，我们只需要为#inputPassword1修改该行，并告诉它使用#inputPassword1 collapse("hide")而不是"show"来隐藏折叠。 符合逻辑吧？

当我对此类行为进行编程以查阅文档时，我发现它非常有用。 通常有一些我想做的事的例子，只需要稍作调整就可以在我的网站上工作。

jQuery的文档在这里。

Bootstrap的文档在这里。

当寻求SO方面的帮助时，如果您可以创建一个jsFiddle来将问题与所生产网站的复杂性隔离开来，那就太好了。 然后，其他需要帮助的用户可以创建代码的修改后的副本以显示。 超级有帮助！

干杯。