jQueryのフォーム.hide（）

Question

を働いていない私は私の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> 

に2つのフォームを持っており、このif文外部ファイルに（条件は、意図すでにテストとして働いています）。

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

条件distanciaが意図したとおりは、コード作品を満たしていないある場合。

条件が満たされていれば、両方のフォームが表示されます。 formRegistroMarcaAtletaDistancia常に表示されているに結果の

、およびformRegistroMarcaAtletaTiempoは、それがあるべきときにのみ表示されています。

は、私はそう

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

好きで、私の今formRegistroMarcaAtletaTiempoが常に表示されて驚き、それがあるべきときにのみ表示されformRegistroMarcaAtletaDistanciaに、フォームの順序を変更してみました。

編集： 全体のdivの場合には、それは

<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

あなたは以下のようにフォームを配置しましたが、基本的なフォームはXHTML検証に従ってネストされてはなりません。これを修正すると、あなたの問題はあなたが投稿したフィドルでソートされます。

希望これはあなたのページでこれらの `id`で一つだけの要素を持っている場合は、確認してくださいすることができ

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

Answer 2

を事項は、あなたが正しいjqueryの参照を持っていることを確認してください。今は私のために働いています。