如何使用純 JavaScript 切換類別並將 jQuery 程式碼轉換為 Vanilla JS？

在純 JavaScript 中切換類別：將 jQuery 轉換為 Vanilla JS

jQuery 是一個流行的 JavaScript 函式庫，用於簡化常見任務，包括操作 DOM 元素。然而，使用純 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，這是一個提供相容性的 polyfill。

其他注意事項

• 避免使用 ID 作為選取器，因為它們可能會將全域變數洩漏到 JS 視窗物件中。
• 使用基於類別的選擇器以獲得更高的特異性和性能。

以上是如何使用純 JavaScript 切換類別並將 jQuery 程式碼轉換為 Vanilla JS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！