Comment basculer les classes à l'aide de JavaScript pur et convertir le code jQuery en Vanilla JS ?

Basculer les classes en JavaScript pur : convertir jQuery en Vanilla JS

jQuery est une bibliothèque JavaScript populaire pour simplifier les tâches courantes, y compris la manipulation des éléments DOM. Cependant, l’utilisation de JavaScript pur offre un plus grand contrôle et une plus grande flexibilité. Cet article vise à convertir le code jQuery fourni en JavaScript pur, permettant le basculement des classes d'éléments.

Code jQuery pour référence

<code class="javascript">$('.btn-navbar').click(function() {
  $('.container-fluid:first').toggleClass('menu-hidden');
  $('#menu').toggleClass('hidden-phone');

  if (typeof masonryGallery != 'undefined') masonryGallery();
});</code>

Solution JavaScript pure

La principale L'exigence est de basculer les classes de téléphone caché et de téléphone caché pour les éléments respectifs. Ceci peut être réalisé en utilisant la méthode classList.toggle().

<code class="javascript">const btnNavbar = document.querySelector('.btn-navbar'); // Update selector to query by class
const menu = document.querySelector('.menu'); // Update selector to query by class
const containerFluid = document.querySelector('.container-fluid');

btnNavbar.addEventListener('click', () => {
  containerFluid.classList.toggle('menu-hidden');
  menu.classList.toggle('hidden-phone');

  if (typeof masonryGallery != 'undefined') masonryGallery();
});</code>

Compatibilité des navigateurs

classList.toggle() est une fonctionnalité standard prise en charge par les navigateurs modernes. Pour les navigateurs plus anciens, envisagez d'utiliser classList.js, un polyfill qui assure la compatibilité.

Considérations supplémentaires

• Évitez d'utiliser des identifiants comme sélecteurs, car ils peuvent divulguer des valeurs globales dans l'objet fenêtre JS.
• Utilisez un sélecteur basé sur les classes pour une spécificité et des performances supérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!