Wie zu verbergen und div mit jQuery

Question

Ich entwickle eine Bootstrap-Website für CI-Tests. Ich habe ein div, #chooseTest mit einem Dropdown-Menü erstellt, mit dem der Benutzer auswählen kann, welche Art von Test durchgeführt werden soll.

Bearbeiten:Die Datei ist eine .hbs-Datei (Lenker). Nach einigem Graben, wurde mir klar, dass die Js mit dem jQuery-Datei, läuft nicht einmal ...

The website

Wenn der Benutzer eine Wahl getroffen hat, sollte #chooseTest nicht sichtbar sein (was es immer noch: die Div mit dem Drop-Down-Menü unter den Textfeldern). Und das entsprechende div sollte an seiner Stelle sichtbar sein: #mavenForm zum Beispiel (das div mit den Checkboxen: Find bugs & check style).

Nichts funktioniert jetzt. #mavenForm ist sichtbar, wenn die Website gestartet wird und das Dropdown-Menü nur zur Anzeige dient. Was ist falsch an dem Code?

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

scheint Ihr Code mit jQuery 2.1.1 und Ihrer jQuery-Funktion in einer Seite-Ready-Funktion zu arbeiten, in Ordnung. Sehen Sie das Snippet unten zu sehen:

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

basierend auf JQuery Dokumentation. „Eine Seite nicht sicher gehandhabt werden kann, bis das Dokument‚bereit‘jQuery erkennt diesen Zustand der Bereitschaft für Der Code innerhalb von $ (document) .ready() wird nur ausgeführt, wenn die Seite Document Document Model (DOM) für die Ausführung von JavaScript-Code bereit ist Code innerhalb $ (window) .on ("load", function() {...}) wird ausgeführt, sobald die gesamte Seite (Bilder oder Iframes), nicht nur das DOM, fertig ist. "

Ein weiterer Test auf jsfiddle: https://jsfiddle.net/1v14syto/

Also, was Sie tun müssen, ist Ihre jQuery-Code von $ (document) .ready (function() {/ * Ihr Code * /})

zu umgeben

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