jQuery Form .Hide() nicht funktioniert

Question

Ich habe zwei Formen in meinem HTML

<form id="formRegistroMarcaAtletaDistancia"> 
    <ul class="form"> 
     <li> <label>Centimetros:</label><input class="ingresoDatos" name="cmAtl2" id="cmAtl2" type="number" min="0" required/></li> 
    </ul> 
</form> 

<form id="formRegistroMarcaAtletaTiempo"> 
    <ul class="form"> 
     <li> <label>Minutos:</label><input class="ingresoDatos" name="minutosNat" id="minutosNat" type="number" min="0" required/></li> 
     <li> <label>Segundos:</label><input class="ingresoDatos" name="segundosNat" id="segundosNat" type="number" min="0" required/></li> 
    </ul> 
</form> 

Und diese if-Anweisung (Bedingung arbeitet nun wie vorgesehen, bereits getestet) in einer externen Datei.

if(distancia) { 
    $("#formRegistroMarcaAtletaTiempo").hide(); 
    $("#formRegistroMarcaAtletaDistancia").show(); 
} else { 
    $("#formRegistroMarcaAtletaDistancia").hide(); 
    $("#formRegistroMarcaAtletaTiempo").show(); 
} 

Wenn die Bedingung distancianicht ist erfüllt der Code wie vorgesehen funktioniert.

Wenn die Bedingung erfüllt ist, werden beide Formulare angezeigt.

Resultierende in formRegistroMarcaAtletaDistancia immer angezeigt wird, und formRegistroMarcaAtletaTiempo wird nur angezeigt, wenn es sein sollte.

Ich habe versucht, die Reihenfolge der Formulare zu ändern, wie so

<form id="formRegistroMarcaAtletaTiempo"> 
    <ul class="form"> 
     <li> <label>Minutos:</label><input class="ingresoDatos" name="minutosNat" id="minutosNat" type="number" min="0" required/></li> 
     <li> <label>Segundos:</label><input class="ingresoDatos" name="segundosNat" id="segundosNat" type="number" min="0" required/></li> 
    </ul> 
</form> 

<form id="formRegistroMarcaAtletaDistancia"> 
    <ul class="form"> 
     <li> <label>Centimetros:</label><input class="ingresoDatos" name="cmAtl2" id="cmAtl2" type="number" min="0" required/></li> 
    </ul> 
</form> 

Und zu meiner Überraschung jetzt formRegistroMarcaAtletaTiempo wird immer angezeigt und formRegistroMarcaAtletaDistancia wird nur angezeigt, wenn es sein sollte.

Edit: Ganze div falls zählt es

<div id="subpagina5" class="contenedor"> 
    <h1 class="encabezado">Registro de marca de un atleta en una disciplina</h1> 
     <form id="formRegistroMarcaAtleta"> 
      <ul class="form"> 
       <li> <label>Disciplina:</label> 
        <select id="listaDisciplinasRegistroMarcaAtleta" class="listaDatos"></select> 
       </li> 
       <li> <label>Atleta:</label> 
        <select id="listaAtletasRegistroMarcaAtleta" class="listaDatos"></select> 
       </li> 
      </ul> 

      <form id="formRegistroMarcaAtletaTiempo"> 
       <ul class="form"> 
        <li> <label>Minutos:</label><input class="ingresoDatos" name="minutosRMA" id="minutosRMA" type="number" min="0" required/></li> 
        <li> <label>Segundos:</label><input class="ingresoDatos" name="segundosRMA" id="segundosRMA" type="number" min="0" required/></li> 
       </ul> 
      </form> 

      <form id="formRegistroMarcaAtletaDistancia"> 
       <ul class="form"> 
        <li> <label>Centimetros:</label><input class="ingresoDatos" name="cmRMA" id="cmRMA" type="number" min="0" required/></li> 
       </ul> 
      </form> 

      <div class="btnContenedor"> 
       <input type="submit" value="Aceptar" id="btnRegistroMarcaAtleta" class="btnSubmit" /> 
      </div> 
     </form> 
</div> 

Answer 1

Sie hatten Formular wie folgt angeordnet, im Grunde Formular soll nicht wie XHTML-Validierung geschachtelt werden. Sobald Sie dies behoben haben, wird Ihr Problem in der von Ihnen geposteten Geige sortiert.

this helps

<form id="formRegistroMarcaAtleta"> 
.. 
<form id="formRegistroMarcaAtletaTiempo"></form> 
... 
<form id="formRegistroMarcaAtletaDistancia"></form> 
</form> 

Answer 2

Stellen Sie sicher, die richtige jquery Referenz. Für jetzt arbeitet es für mich.