Question

我正在尝试为此代码构建JavaScript函数，但是当我点击：

时

<input class="boton" type="button" onclick="VerConsultas('BusquedaPorFecha', 'ConsultasEmpleado');" value="Busqueda por Fecha" />

之前：

<input class="boton" type="button" onclick="VerConsultas('BusquedaPorDepartamento', 'ConsultasEmpleado');" value="Busqueda por Departamento" />

第一个div不会更改其类别。

我认为问题是由for循环造成的。

的Javascript

<script type="text/javascript">
    function VerConsultas(id,exception) {
        var Consultas = document.getElementById(id);
        var visibles = document.getElementsByClassName("visible");
        var Excepcion = document.getElementById(exception);
        for (var i = 0; i < visibles.length; i++)
        {
            visibles[i].className = "hide";
        }
        if (Consultas.className == "visible") {
            Consultas.className = "hide";
        } else {
            Consultas.className = "visible";
        }
        if (Excepcion != null) { Excepcion.className = "visible";}
    }
</script>

Html输入

<nav id="TopNavigator">
     <input class="boton" type="button" onclick="VerConsultas('AltaEmpleado', '');" value="Alta Empleado" />
     <input class="boton" type="button" onclick="VerConsultas('BajaEmpleado', '');" value="Baja Empleado" />
     <input class="boton" type="button" onclick="VerConsultas('ModificarEmpleado', '');" value="Modificar Empleado" />
     <input class="boton" type="button" onclick="VerConsultas('ConsultasEmpleado', '');" value="Consultas Empleado" />
</nav>
<nav id="ConsultasEmpleado" class="hide">
     <asp:Button ID="Todos" runat="server" Text="Mostrar Todos los empleados" OnClick="TodosEmpleados" /><br />
     <input class="boton" type="button" onclick="VerConsultas('BusquedaPorFecha', 'ConsultasEmpleado');" value="Busqueda por Fecha" />
     <input class="boton" type="button" onclick="VerConsultas('BusquedaPorCategoria', 'ConsultasEmpleado');" value="Busqueda por Categoria" />
     <input class="boton" type="button" onclick="VerConsultas('BusquedaPorDepartamento', 'ConsultasEmpleado');" value="Busqueda por Departamento" />
     <input class="boton" type="button" onclick="VerConsultas('BusquedaPorSalario', 'ConsultasEmpleado');" value="Busqueda por Salario" />
</nav>

Html Divs

<div class="hide" id="BusquedaPorFecha">
     Insertar una fecha
</div>
<div class="hide" id="BusquedaPorCategoria">
     Seleccione una Categoría
</div>
<div class="hide" id="BusquedaPorDepartamento">
     Seleccione un Departamento
</div>
<div class="hide" id="BusquedaPorSalario">
     Inserte un salario desde el que iniciar la búsqueda
</div>

jsfiddle example

Answer 1

您的问题是document.getElementsByClassName返回HTMLCollection，当DOM更改时会更新，因此当您应用.hide类时，该节点将从集合。

你可以使用返回NodeList的document.querySelector(".visible")，但速度较慢（虽然我们在这里谈论的是毫秒）。

您还可以将其转换为数组以防止更新，如下所示：

var visible = document.getElementsByClassName("visible"); //collection
    visible = [].slice.call(visible); //array

其他几点，你不应该像这样使用内联javascript，最好保持脚本文件和结构文件的完整性。

为此，我对您的代码进行了一些修改，here。

输入

<input  type="button" class="filtro"
        data-consultas="BusquedaPorSalario" 
        data-exc="ConsultasEmpleado"
        value="Búsqueda Por Salario"/>

<input  type="button" class="filtro"
        data-consultas="BusquedaPorFecha" 
        data-exc="ConsultasEmpleado"
        value="Búsqueda Por Fecha"/>

注意：添加了.filtro类以减少要搜索的元素数量。

注意： data-consultas和data-exc值代表您的函数中的id,exception参数。 data-*属性是一个标准，允许创建自定义属性。

的JavaScript

inputs = document.getElementsByClassName("filtro");
for( var i = 0 , l = inputs.length; i < l ; i ++ ){
    input = inputs[i];
    input.addEventListener("click",VerConsultas);
}

function VerConsultas(e){
    var data = e.target.dataset;
    var id = data.consultas;
    var exc = document.getElementById(data.exc);
    var consultas = document.getElementById(id);
    var visible = document.getElementsByClassName("visible");
    visible = [].slice.call(visible);
    for( var i = 0 ,l = visible.length ;i < l ;i ++ ){
        var current = visible[i];
        current.className = "hide";
    }
    consultas.className = "visible";
    if( exc != null )
        exc.className = "visible";
}

希望有所帮助：）

javascript for for don not not class

1 个答案:

输入

的JavaScript