jQueryでdivを表示/非表示にする方法

Question

私はCIテスト用のBootstrap Webサイトを開発中です。 divを作成しました。#chooseTestドロップダウンメニューを使用して、実行するテストの種類を選択することができます。

編集：ファイルは.hbsファイル（ハンドルバー）です。いくつかの掘削後、私も（#chooseTestが見えてはならない、

ユーザーが選択を行ったThe website

...実行されていない、.jsファイルはjQueryを使ってファイルのことを実現していることをまだあります：テキストフィールドの下のドロップダウンメニューのあるDiv）。そして適切なdivがその場所に表示されるはずです：#mavenForm（例：チェックボックス付きのdiv：Find bugs &チェックスタイル）。

現在何も動作していません。 #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>

Answer 1

あなたのコードは、jQueryの2.1.1とページレディ機能であなたのjQueryの機能を正常に動作しているようです。確認するには、以下のスニペットを参照してください：jQueryのドキュメントに基づいて

$(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>

Answer 2

： 準備「文書があるまで、ページを安全に操作することはできません 『』 jQueryのための準備のこの状態を検出します。 $（window）.on（ "load"、function（））の中にコードが含まれています。 {...}）は、DOMだけでなく、ページ全体（画像やiframe）が準備完了した後に実行されます。 https://jsfiddle.net/1v14syto/

だから、あなたが何をする必要があるか（ドキュメント）.ready（関数（）{/ *あなたのコード* /}）

$であなたのjqueryのコードを囲むようにある：

jsfiddle上の別のテスト

$(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>