javascript 因为不要改变 class

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不改变其class。

我认为问题出在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 分区

<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 returns 一个 HTMLCollection，它会在 DOM 更改时更新，因此当您应用 .hide class，节点从集合中删除。

您可以只使用 document.querySelector(".visible")，其中 returns 是一个 NodeList，但速度较慢（尽管我们在这里谈论的是毫秒）。

你也可以把它转换成一个数组来防止它更新，像这样：

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

还有几点，您不应该那样使用内联 javascript，最好将脚本文件和结构文件分开。

为此，我对您的代码做了一些修改 fiddle 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"/>

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

注意： 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 因为不要改变 class

javascript FOR don't change class

javascript

class

for-loop

frontend

输入

JavaScript