如何使用纯 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中文网其他相关文章！