Bagaimana untuk Togol Kelas Menggunakan JavaScript Tulen dan Menukar Kod jQuery kepada Vanilla JS?

Menogol Kelas dalam JavaScript Tulen: Tukar jQuery kepada Vanilla JS

jQuery telah menjadi perpustakaan JavaScript yang popular untuk memudahkan tugas biasa, termasuk memanipulasi elemen DOM. Walau bagaimanapun, menggunakan JavaScript tulen menawarkan kawalan dan fleksibiliti yang lebih besar. Artikel ini bertujuan untuk menukar kod jQuery yang disediakan kepada JavaScript tulen, membolehkan togol kelas elemen.

Kod jQuery untuk Rujukan

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

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

Penyelesaian JavaScript Tulen

Yang utama keperluan adalah untuk menogol kelas menu tersembunyi dan telefon tersembunyi untuk elemen masing-masing. Ini boleh dicapai menggunakan kaedah 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>

Keserasian Pelayar

classList.toggle() ialah ciri standard yang disokong oleh penyemak imbas moden. Untuk penyemak imbas yang lebih lama, pertimbangkan untuk menggunakan classList.js, polyfill yang menyediakan keserasian.

Pertimbangan Tambahan

• Elakkan menggunakan ID sebagai pemilih, kerana ia boleh membocorkan global ke dalam objek tetingkap JS.
• Gunakan pemilih berasaskan kelas untuk kekhususan dan prestasi yang lebih tinggi.

Atas ialah kandungan terperinci Bagaimana untuk Togol Kelas Menggunakan JavaScript Tulen dan Menukar Kod jQuery kepada Vanilla JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!