CSS/Javascript Afficher/Masquer DIV en utilisant une classe CSS?

Question

J'ai parcouru les pages et trouvé de nombreux scripts pour cacher et afficher le contenu des DIV, comme un clic sur le bouton.

Mais ils travaillent avec des ID.

Je voudrais faire la même chose MAIS je veux utiliser une classe au lieu d'un ID de sorte que si je veux avoir 20 DIV que de basculer ... Cacher/Montrer Je ne dois pas ajouter de code supplémentaire.

Voici un code:

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

Quelqu'un peut-il aider à cela s'il vous plaît?

Merci

Answer 1

Est-ce que jquery est une option? Si tout va bien, parce que cela fait ce que vous voulez:

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

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

Answer 2

Ne serait-ce juste

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

Ou regrouper tous les éléments que vous voulez cacher dans un conteneur div, puis cacher div.

Answer 3

En utilisant jQuery:

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

où classname est le nom de la classe.

Answer 4

En utilisant jQuery Selectors, vous pouvez trouver une carte d'identité par:

$("#id") 

Changement que pour sélectionner les classes est trivial:

$(".className") 

Sans utiliser jQuery c'est un peu plus trivial, mais vous pouvez vérifier est question SO aide:

How to getElementByClass instead of GetElementById with Javascript?

Answer 5

Vous pouvez simplement utiliser $(".className").hide();

Le $(".somthing") faire la même chose que $("#somthing"), sauf qu'il est une classe au lieu d'une carte d'identité.

Answer 6

La plupart des réponses jQuery devraient être assez faciles, mais vu que votre exemple est dans JS, voici comment le faire dans JS.

Potentiel négatif: navigateurs ne prenant pas en charge getElementsByTagName. J'ai testé IE7 et cela fonctionne, mais je ne suis pas sûr de plus bas.

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; 

Essayez-: http://jsfiddle.net/robert/PkHYf/

Answer 7

Comme d'autres l'ont dit à plusieurs reprises, cela est facile à l'aide d'un sélecteur jQuery jquery et la méthode .hide. Cependant, puisque vous posez la question de façon générale et que c'est une bonne idée de savoir comment le faire sans cadre, ce n'est pas une réponse complète.

Voici vos options:

1. JQuery Méthode. Utilisez simplement les sélecteurs jQuery et la méthode .hide().

   $ ("className.") (Cacher)

2. vanille JS:. CSS dynamique. Une approche consiste à ajouter dynamiquement des feuilles de style à la tête du document - vous pouvez Alter CSS class attributes with javascript?

3. vanille JS: Modifier CSS directement:

   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"; 
         } 
        } 
       }