jQuery表单.hide()不起作用

时间:2016-08-10 13:17:12

标签: javascript jquery html

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

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

2 个答案:

答案 0 :(得分:1)

您已经安排了如下表格,基本上表格不应按照XHTML验证进行嵌套。解决此问题后,您的问题将按照您发布的小提琴进行排序。

希望这有帮助

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

答案 1 :(得分:-1)

确保您拥有正确的jquery引用。现在它为我工作。