Comment puis-je modifier l'affichage d'une catégorie à l'aide de JavaScript?
J'ai donc ce code:
JS:
function show_all()
{
document.getElementByClassName('login').style.display = 'inline';
document.getElementById('button-hide').style.display = 'inline';
document.getElementById('button-show').style.display = 'none';
};
function hide_all()
{
document.getElementByClassName('login').style.display = 'none';
document.getElementById('button-hide').style.display = 'none';
document.getElementById('button-show').style.display = 'inline';
};
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/>
<input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/>
</nav>
<p class="login">Username:</p>
<img src="un.png" class="login"/>
<p class="login">Password:</p>
<p>Something not ment to be hidden.</p>
<img src="pass.png" class="login"/>
Et j'ai besoin de l'ensemble de la classe pour être affichés ou masqués;
J'ai environ 50 blocs avec des éléments avec la classe "login" et je voudrais utiliser JavaScript pour l'afficher.
- un jquery répondez?
- Comme par @AnujaAgarwal, jquery solution est encore de javascript si elle introduit une nouvelle dépendance. Cela dit, la solution est à quelques lignes de code et serait utile de l'adoption de la bibliothèque.
- ce n'est pas ajax ou jquary...
Vous devez vous connecter pour publier un commentaire.
Un peu tard maintenant, mais cela devient à certains points de vue. Pourquoi pas:
Changer
display
de chaque élément est une mauvaise idée. Juste basculer la classe de tous ceslogin
s wrapper et l'ensembledisplay
en CSS.Une suggestion, pourquoi ne pas utiliser JQuery. C'est assez simple et facile, le style peut être none/inline/bloquer etc
Vous pouvez changer la règle CSS après la trouver à l'aide d'une fonction comme
et de l'appliquer comme
Je n'ai pas remarqué d'autres personnes qui font ce genre de chose, donc s'il vous plaît vérifier avant de l'utiliser. L'approche de @br3t 's réponse est beaucoup plus habituel.
Spectacle:
Cacher:
JS:
HTML:
for
boucles.J'ai simplement utilisé en mode hors connexion version de jQuery à la place.
Je suis tombé sur le même problème et après avoir presque aucune expérience avec JavaScript, composée de cette solution dans une journée. Donc, si il ya quelque chose de mal avec, s'il vous plaît noter et commenter. J'ai découvert le
getElementsByClassName()
méthode, qui renvoie un tableau-comme l'objet de tous les éléments enfants qui ont tous des noms de classe, de plus en plus sur getElementsByClassName(). Aussi, je voulais être en mesure de le faire à partir d'un seul bouton, de sorte qu'il peut dépendre de si vous avez besoin de deux boutons pour afficher ou masquer. Vous pourriez le faire avecclassList.add()
etclassList.remove()
.Créer une classe CSS:
Puis, avec cette fonction de cibler vos éléments HTML par classe:
La boucle for est utilisée pour obtenir tous les éléments de cette classe et à l'aide de classList.bascule la bascule .classe caché pour eux.
Vous pouvez également utiliser
querySelectorAll()
qui renvoie tous les éléments du document qui correspondent spécifié sélecteurs CSS.