【问题标题】:How to hide and show div with jQuery如何使用 jQuery 隐藏和显示 div
【发布时间】:2017-10-30 22:47:56
【问题描述】:

我正在开发一个用于 CI 测试的 Bootstrap 网站。我创建了一个带有下拉菜单的 div #chooseTest,用户可以使用它来选择要执行的测试类型。

编辑: 该文件是一个 .hbs 文件(车把)。经过一番挖掘,我意识到带有 jQ​​uery 的 .js 文件甚至没有运行......

The website

当用户做出选择时,#chooseTest 应该不可见(它仍然是:文本字段下带有下拉菜单的 Div)。并且适当的 div 应该在其位置可见:例如#mavenForm(带有复选框的 div:查找错误和检查样式)。

现在没有任何工作。 #mavenForm 在网站启动时可见,并且下拉菜单仅用于显示。代码有什么问题?

 $(function () {
    $("#mavenForm").hide();

    $("#dropDownJava").click(function () {
        $("#chooseTest").hide();
        $("#mavenForm").show();

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="gitForm">
        <div class="Aligner">
            <div class="container h-100 d-flex justify-content-center">
                <div class="col-md-6">
                    <div class=card>
                        <div class="card-block">
                            <form class="form-create" action="/" method="post">
                                <div class="form-group">
                                    <label id="nameLabel" for="projectNameInput">Name your
                                        project</label>
                                    <input type="text" class="form-control" name="jobname" id="projectNameInput"
                                           placeholder="Enter a A project name you can live with">
                                </div>
                                <div class="form-group">
                                    <label id="gitLabel" for="repoInput">Enter your Git
                                        repository</label>
                                    <input type="text" class="form-control" name="gitrep" id=repoInput
                                           placeholder="A valid Gitrepo...">
                                </div>

<!-- The div #chooseTest which is to be replaced -->
                                <div id="chooseTest">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-success dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Choose Test
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="btn btn-outline-success dropdown-item" id="dropDownJava"
                                               href="#mavenForm">Java</a>
                                        </div>
                                    </div>
                                </div>

<!-- The div #mavenForm that shouldn't be visible when the website launches -->
                                <div id="mavenForm">
                                    <div class="form-group">
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="FindBugs">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">FindBugs</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="CheckStyle">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">CheckStyle</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div>

【问题讨论】:

  • 什么不起作用?控制台有错误吗?因为你的codejsfiddle工作
  • 该文件是一个 .hbs 文件(车把)。经过一番挖掘,我意识到带有 jQ​​uery 的 .js 文件甚至没有运行......

标签: jquery html bootstrap-4


【解决方案1】:

您的代码似乎在 jQuery 2.1.1 和页面就绪函数中的 jQuery 函数中运行良好。看下面的sn-p看看:

$(function(){
  $("#mavenForm").hide();  
    $("#dropDownJava").click(function(){
        $("#chooseTest").hide();
        $("#mavenForm").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gitForm">
        <div class="Aligner">
            <div class="container h-100 d-flex justify-content-center">
                <div class="col-md-6">
                    <div class=card>
                        <div class="card-block">
                            <form class="form-create" action="/" method="post">
                                <div class="form-group">
                                    <label id="nameLabel" for="projectNameInput">Name your
                                        project</label>
                                    <input type="text" class="form-control" name="jobname" id="projectNameInput"
                                           placeholder="Enter a A project name you can live with">
                                </div>
                                <div class="form-group">
                                    <label id="gitLabel" for="repoInput">Enter your Git
                                        repository</label>
                                    <input type="text" class="form-control" name="gitrep" id=repoInput
                                           placeholder="A valid Gitrepo...">
                                </div>

<!-- The div #chooseTest which is to be replaced -->
                                <div id="chooseTest">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-success dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Choose Test
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="btn btn-outline-success dropdown-item" id="dropDownJava"
                                               href="#mavenForm">Java</a>
                                        </div>
                                    </div>
                                </div>

<!-- The div #mavenForm that shouldn't be visible when the website launches -->
                                <div id="mavenForm">
                                    <div class="form-group">
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="FindBugs">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">FindBugs</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="CheckStyle">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">CheckStyle</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div>

【讨论】:

  • 是的!代码本身没有任何问题,但我必须在 .hbs 文件中使用脚本标签才能使其运行!
【解决方案2】:

基于 JQuery 文档: “在文档“准备好”之前,无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 完成后运行准备好执行 JavaScript 代码。包含在 $( window ).on( "load", function() { ... }) 中的代码将在整个页面(图像或 iframe),而不仅仅是 DOM 准备好后运行。 "

另一个关于 jsfiddle 的测试:https://jsfiddle.net/1v14syto/

所以你需要做的是用 $( document ).ready(function(){ /* 你的代码 */ }) 包围你的 jquery 代码

$( document ).ready(function() {
    $('#mavenForm').hide();  
    $('#dropDownJava').click(function(){
        $('#chooseTest').hide();
        $('#mavenForm').show();

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="gitForm">
        <div class="Aligner">
            <div class="container h-100 d-flex justify-content-center">
                <div class="col-md-6">
                    <div class=card>
                        <div class="card-block">
                            <form class="form-create" action="/" method="post">
                                <div class="form-group">
                                    <label id="nameLabel" for="projectNameInput">Name your
                                        project</label>
                                    <input type="text" class="form-control" name="jobname" id="projectNameInput"
                                           placeholder="Enter a A project name you can live with">
                                </div>
                                <div class="form-group">
                                    <label id="gitLabel" for="repoInput">Enter your Git
                                        repository</label>
                                    <input type="text" class="form-control" name="gitrep" id=repoInput
                                           placeholder="A valid Gitrepo...">
                                </div>

<!-- The div #chooseTest which is to be replaced -->
                                <div id="chooseTest">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-success dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Choose Test
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="btn btn-outline-success dropdown-item" id="dropDownJava"
                                               href="#mavenForm">Java</a>
                                        </div>
                                    </div>
                                </div>

<!-- The div #mavenForm that shouldn't be visible when the website launches -->
                                <div id="mavenForm">
                                    <div class="form-group">
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="FindBugs">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">FindBugs</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" value="CheckStyle">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-4">CheckStyle</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div>

【讨论】:

    猜你喜欢
    • 2011-11-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-04
    • 2011-08-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多