CSS/Javascript Mostrar/Ocultar DIV usando una clase de CSS?

Question

He buscado en Google y encontré muchos guiones para ocultar y mostrar el contenido DIV, como una palanca en clic de botón.

Pero ellos son el trabajo usando las identificaciones.

Me gustaría hacer lo mismo PERO quiero usar una clase en lugar de una identificación, de modo que si quiero tener 20 DIV que alternar ... Ocultar/Mostrar No tengo que agregar código adicional.

Aquí hay un código:

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> 

¿Alguien puede ayudar con esto por favor?

Gracias

Answer 1

Es jQuery es una opción? Esperemos que así sea, ya que esto hace lo que quiere:

http://api.jquery.com/toggle/

$(".class").toggle(); 
or 
$(".class").show(); $(".class").hide(); 

Answer 2

No sería esto sólo será

$('.classname').hide(); 

o grupo todos los elementos que desea ocultar dentro de un div contenedor, y luego ocultar el div.

Answer 3

Usando jQuery:

$(".classname").hide(); 

donde classname es el nombre de la clase.

Answer 4

Usando jQuery selectores, se puede encontrar una identificación por:

$("#id") 

Cambio que para seleccionar las clases es trivial:

$(".className") 

Sin usar jQuery es un no trivial poco más, pero se puede comprobar º Así que la pregunta es un poco de ayuda:

How to getElementByClass instead of GetElementById with Javascript?

Answer 5

Simplemente podría utilizar $(".className").hide();

El $(".somthing") hacer lo mismo que $("#somthing"), excepto que es para una clase en lugar de un ID.

Answer 6

La mayoría de las respuestas jQuery debería ser bastante fácil, pero al ver como su ejemplo está en JS regular, aquí está cómo hacerlo en JS.

desventaja potencial: los navegadores que no soportan getElementsByTagName. Probé IE7 y funciona, pero no estoy seguro de menor.

var divs = document.getElementsByTagName('div'); 

var toggle = function() {  
    for (var i = 0, l = divs.length; i < l; i++) { 
     if (divs[i].getAttribute('class') == 'problem') 
      if (divs[i].style.display == 'none') divs[i].style.display = ''; 
      else divs[i].style.display = 'none'; 
    } 
} 

document.getElementById('Toggle').onclick = toggle; 

Pruébalo: http://jsfiddle.net/robert/PkHYf/

Answer 7

como otros han dicho varias veces, esto es fácil de jQuery utilizando un selector de jQuery y el método .hide. Sin embargo, dado que está preguntando en un sentido general y es una buena idea saber cómo hacerlo sin un marco, esa no es una respuesta completa.

Estas son las opciones:

1. jQuery Método. Simplemente use los selectores jQuery y el método .hide().

   $ ("nombre de clase"). Hide()

2. vainilla. JS: CSS dinámico. Un método consiste en añadir dinámicamente hojas de estilo para el encabezado del documento - se puede Alter CSS class attributes with javascript?

3. vainilla JS: Modificar CSS directamente:

   var ss = document.styleSheets; 
       for (var i=0; i<ss.length; i++) { 
        var rules = ss[i].cssRules || ss[i].rules; 
   
        for (var j=0; j<rules.length; j++) { 
         if (rules[j].selectorText === ".classname") { 
          rules[j].style.visibility = "none"; 
         } 
        } 
       }