¿Ocultando todos los elementos con el mismo nombre de clase?

Estoy tratando de ocultar elementos con el mismo nombre de clase (float_form), pero también estoy tratando de usar el script a continuación para mostrarlos (todos los divs de la clase float_form están inicialmente ocultos). He analizado muchas soluciones de jquery, pero parece que no puedo hacer que ninguna de ellas funcione para esto.¿Ocultando todos los elementos con el mismo nombre de clase?

function show(a) { 
    var e = document.getElementById(a); 
    if (!e) 
     return true; 

    if (e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    return true; 
}

Editar: Lo siento si no estaba claro, no tengo la intención de usar jQuery (y sé que esto no es jQuery). Estoy buscando una forma de usar javascript para reconocer nombres de clases repetidos que no están en style = display: none; sin comprometer el elemento mostrar/ocultar ID ya que hay un bucle con la identificación div como la clave. El html para el div se ve a continuación, con {item.ID} como un bucle while.

<div class="float_form" id="{item.ID}" style="display: none;">

Fuente

2012-06-28 user1489970

su código tiene cero jQuery. ** JavaScript no es jQuery ** !. El código que se muestra selecciona un elemento por id, no por nombre de clase. Para este último, use 'document.getElementsByClassName', y recorra todos los elementos en la lista devuelta. –

@RobW. ¿Deberíamos agregar la etiqueta jQuery? Respondí tanto vanilla js como jQuery. – gdoron

Incluso después de su edición, es muy, muy claro, qué es lo que está preguntando \ necesitar. – gdoron

vainilla javascript

function toggle(className, displayState){ 
    var elements = document.getElementsByClassName(className) 

    for (var i = 0; i < elements.length; i++){ 
     elements[i].style.display = displayState; 
    } 
} 

toggle('float_form', 'block'); // Shows 
toggle('float_form', 'none'); // hides

jQuery:

$('.float_form').show(); // Shows 
$('.float_form').hide(); // hides

Fuente

2012-06-28 23:52:11 gdoron

+1 pero desafortunadamente 'getElementsByClassName' solo funciona en versiones recientes de los navegadores. – undefined

@undefined. Puede usar jQuery si lo desea o implementar 'getElementsByClassName' si le gusta. Debería poner mucho más esfuerzo en sus preguntas, no sé si realmente está usando jQuery o no. – gdoron

@undefined.Bueno, eso es molesto, la gente quiere que les hagas su trabajo, y ni siquiera pierdas el tiempo diciendo lo que quieren. [Suena como un vampiro de ayuda para mí] (http://slash7.com/2006/12/22/vampires/) – gdoron

Probar:

function showClass(a){ 
var e = []; 
var e = getElementsByClassName(a); 
for(i in e){ 
    if(!e[i])return true; 

    if(e[i].style.display=="none"){ 
     e[i].style.display="block" 
    } else { 
     e[i].style.display="none" 
    } 
} 
return true; 
}

demostración: showClass("float_form");

Fuente

2012-06-28 23:51:12 mgraph

Como el elemento ID se está utilizando para un bucle de matriz, necesito mantener el getElementById. Traté de usar esto por separado con un botón de entrada oculto, pero tampoco funcionó. – user1489970

@ user1489970 es una nueva función 'showClass()', simplemente mantenga la función 'show()' que ya tiene, y agregue – mgraph

. Intenté usarlo por separado (y analizando var e como var f en la función original). Solo la función original funcionó. – user1489970

Si usted está buscando en jQuery, entonces es bueno saber que se puede utilizar un selector de clase dentro de los parámetros de $ y llame al método .hide().

$('.myClass').hide(); // all elements with the class myClass will hide.

Pero si es una palanca que está buscando, utilice .toggle();

Pero aquí está mi opinión sobre un buen palanca sin usando jQuery:

function toggle(selector) { 
    var nodes = document.querySelectorAll(selector), 
     node, 
     styleProperty = function(a, b) { 
     return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b]; 
     }; 

    [].forEach.call(nodes, function(a, b) { 
    node = a; 

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block'; 
    }); 

} 

toggle('.myClass');

demostración aquí (Haga clic en " Render "para ejecutar): http://jsbin.com/ofusad/2/edit#javascript,html

Fuente

2012-06-28 23:51:31 0x499602D2

¿Ocultando todos los elementos con el mismo nombre de clase?

Respuesta

Cuestiones relacionadas