J'ai affaire à un système hérité et je ne peux pas réécrire tout le CSS.

Je me retrouve donc dans le besoin de basculer 2 classes sur le même élément lorsqu'un autre est cliqué (imaginez en cliquant sur un bouton pour masquer/afficher un modal).

Ce qui suit est le code pour le modal.
Où la fenêtre modale est par défaut .hidden (sans la classe "visible") et au clic elle est .visible (sans la classe "cachée").

function openModal(modalID) {
  document.getElementById(modalID)
    .classList.toggle('hidden');

  document.getElementById(modalID)
    .classList.toggle('visible');
}
I agree to accept the
<a href="#" 
   onclick="openModal('tandcmodal')">
       terms and conditions
</a>
of this website.



<div id="tandcmodal"
     class="hidden">
    Content of the modal
</div>

Donc, je pense qu'il doit y avoir un moyen de basculer plus d'une classe à la fois avec .toggle().
Ou n'est-ce pas ?

0
Adriano 6 févr. 2020 à 04:12

1 réponse

Meilleure réponse

Malheureusement, .toggle accepte un seul argument : le nom de la classe que vous souhaitez basculer. Pour être DRY, vous devrez parcourir un tableau de noms de classes, ou enregistrer la classList dans une variable et appeler .toggle deux fois :

function openModal(modalID) {
  const { classList } = document.getElementById(modalID);
  classList.toggle('hidden');
  classList.toggle('visible');
}
.hidden {
  display: none;
}
.visible {
  display: block;
}
I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>

Mais notez que généralement il n'y a pas besoin à la fois d'une classe hidden et d'une classe visible. Souvent, vous pouvez avoir juste une classe hidden, et l'ajouter / la supprimer, laissant le style d'affichage par défaut prendre effet lorsque hidden n'est pas actif :

function openModal(modalID) {
  document.getElementById(modalID).classList.toggle('hidden');
}
.hidden {
  display: none;
}
I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>

Notez également que les gestionnaires d'attributs en ligne se comportent très étrangement, ont des problèmes d'échappement et sont généralement considérés comme assez mauvaise pratique - ils devraient probablement être évités dans presque tous les cas. Envisagez d'ajouter l'écouteur d'événement à l'aide de Javascript :

document.querySelector('a').addEventListener('click', () => openModal('tandcmodal'));
function openModal(modalID) {
  document.getElementById(modalID).classList.toggle('hidden');
}
.hidden {
  display: none;
}
I agree to accept the
<a href="#">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>
2
CertainPerformance 6 févr. 2020 à 01:18