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> 

의 두 가지 형태가 있고,이 경우 문 외부 파일에 (조건이 의도 이미 시험대로 작동). 조건 distancia이 경우

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

하지 의도 한대로 코드가 작동 만났다.

조건이 충족되면 두 가지 양식이 모두 표시됩니다. 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 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와 참조가 있는지 확인 문제. 당분간은 저를 위해 일합니다.