Pure JavaScript を使用してクラスを切り替え、jQuery コードをバニラ JS に変換する方法

Pure JavaScript でクラスを切り替える: jQuery を Vanilla JS に変換する

jQuery は、DOM 要素の操作などの一般的なタスクを簡素化するための人気のある JavaScript ライブラリです。ただし、純粋な JavaScript を使用すると、より優れた制御と柔軟性が得られます。この記事は、提供された jQuery コードを純粋な JavaScript に変換し、要素クラスの切り替えを可能にすることを目的としています。

リファレンス用の jQuery コード

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

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

純粋な JavaScript ソリューション

主要な要件は、それぞれの要素のメニュー非表示クラスと非表示電話クラスを切り替えることです。これは、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>

ブラウザの互換性

classList.toggle() は、最新のブラウザでサポートされる標準機能です。古いブラウザの場合は、互換性を提供するポリフィルである classList.js の使用を検討してください。

その他の考慮事項

• JS ウィンドウ オブジェクトにグローバルが漏洩する可能性があるため、ID をセレクターとして使用することは避けてください。
• より高い特異性とパフォーマンスを得るには、クラスベースのセレクターを使用します。

以上がPure JavaScript を使用してクラスを切り替え、jQuery コードをバニラ JS に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。