تبديل فئات العناصر باستخدام JavaScript خالص: دليل شامل

مقدمة

في JavaScript، يعد التحكم في فئات العناصر أمرًا بالغ الأهمية لتطوير الويب الديناميكي. إحدى المهام الشائعة هي تبديل الفئات لتغيير مظهر العنصر أو وظيفته. في حين أن jQuery جعلت هذه المهمة واضحة ومباشرة، فمن الضروري فهم كيفية إنجازها باستخدام JavaScript خالص.

jQuery Solution ومكافئات JavaScript

يستخدم كود jQuery المقدم طريقة toggleClass() لتبديل فئات القائمة المخفية والهاتف المخفي على عناصر محددة.

JavaScript المكافئات:

• الخيار 1 (classList.toggle):

تدعم المتصفحات الحديثة طريقة classList.toggle(). على سبيل المثال:

var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

• الخيار 2 (classList.js للمتصفحات القديمة):

المتصفحات الأقدم يمكن استخدام مكتبة classlist.js لتنفيذ classList.toggle(). مثال:

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');

توضيح حول استخدام المعرف

كملاحظة جانبية، يوصى بتجنب استخدام المعرفات في كود JavaScript الخاص بك. المعرفات هي أرقام عمومية تتسرب إلى كائن نافذة JavaScript، مما قد يؤدي إلى سلوك غير متوقع وتسرب محتمل للذاكرة. بدلاً من ذلك، استخدم الفئات لمزيد من التعليمات البرمجية المعيارية والمغلفة.