순수 JavaScript를 사용하여 클래스를 전환하고 jQuery 코드를 바닐라 JS로 변환하는 방법은 무엇입니까?

순수 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를 선택기로 사용하지 마세요.
• 더 높은 특이성과 성능을 위해 클래스 기반 선택기를 사용하세요.

위 내용은 순수 JavaScript를 사용하여 클래스를 전환하고 jQuery 코드를 바닐라 JS로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!