Wie schalte ich Klassen mit reinem JavaScript um und konvertiere jQuery-Code in Vanilla JS?

Klassen in reinem JavaScript umschalten: jQuery in Vanilla JS konvertieren

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung allgemeiner Aufgaben, einschließlich der Bearbeitung von DOM-Elementen. Die Verwendung von reinem JavaScript bietet jedoch mehr Kontrolle und Flexibilität. Ziel dieses Artikels ist es, den bereitgestellten jQuery-Code in reines JavaScript zu konvertieren und so das Umschalten von Elementklassen zu ermöglichen.

jQuery-Code als Referenz

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

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

Reine JavaScript-Lösung

Die primäre Voraussetzung ist, dass die Klassen „Menü ausgeblendet“ und „Ausgeblendetes Telefon“ für die jeweiligen Elemente umgeschaltet werden. Dies kann mit der Methode classList.toggle() erreicht werden.

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

Browserkompatibilität

classList.toggle() ist eine Standardfunktion, die von modernen Browsern unterstützt wird. Erwägen Sie für ältere Browser die Verwendung von classList.js, einem Polyfill, das Kompatibilität bietet.

Zusätzliche Überlegungen

• Vermeiden Sie die Verwendung von IDs als Selektoren, da dadurch Globalwerte in das JS-Fensterobjekt gelangen können.
• Verwenden Sie einen klassenbasierten Selektor für höhere Spezifität und Leistung.

Das obige ist der detaillierte Inhalt vonWie schalte ich Klassen mit reinem JavaScript um und konvertiere jQuery-Code in Vanilla JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!