متد toggleClass در جی کوئری

متد toggleClass در jQuery راهی ساده برای افزودن یا حذف شرطی کلاس های CSS است. با این متد می توانید ظاهر یک عنصر را با هر بار کلیک تغییر دهید، وضعیت نمایش بخش های صفحه را کنترل کنید یا کلاس های لازم را بر اساس شرایط مشخصی به عناصر اضافه کنید. در این راهنما، ساختار متد، پارامترها، مثال های کاربردی و نکته هایی را بررسی می کنیم که به شما کمک می کنند از تغییر کلاس ها در رابط کاربری به شکل دقیق تری استفاده کنید.

اگر در حال یادگیری jQuery هستید، مقاله آموزش JQuery نیز می تواند برای آشنایی با مفاهیم پایه و روش انتخاب عناصر در صفحه مفید باشد. درک انتخابگرها و رویدادها، استفاده از toggleClass را ساده تر می کند.

متد toggleClass در jQuery چیست؟

متد toggleClass وضعیت یک یا چند کلاس CSS را روی عناصر انتخاب شده تغییر می دهد. اگر کلاس روی عنصر وجود نداشته باشد، به آن اضافه می شود؛ اگر از قبل وجود داشته باشد، حذف خواهد شد. به این ترتیب، لازم نیست برای هر تغییر ابتدا وجود کلاس را با شرط جداگانه بررسی کنید.

برای نمونه، فرض کنید یک دکمه باید با هر بار کلیک رنگ پس زمینه یک عنوان را تغییر دهد. می توانید یک کلاس CSS مانند active تعریف کنید و با toggleClass آن را اضافه یا حذف کنید. مرورگر ظاهر تازه عنصر را بر اساس قوانین CSS نمایش می دهد؛ خود متد رنگ یا شکل عنصر را تعیین نمی کند.

این روش برای تعامل هایی مانند باز و بسته شدن منو، مشخص کردن گزینه انتخاب شده، تغییر حالت کارت ها و نمایش وضعیت فعال یک دکمه کاربرد دارد. در پروژه های طراحی سایت نیز تغییرهای ظاهری کوچک می توانند وضعیت صفحه را برای کاربر روشن تر کنند، به شرط آنکه نتیجه تعامل قابل فهم و قابل دسترس باشد.

نکته مهم این است که toggleClass فقط کلاس ها را جابه جا می کند. برای دیدن تغییر در صفحه، باید کلاس مورد نظر در CSS تعریف شده باشد و انتخابگر jQuery نیز به عنصر درست برسد. با جدا نگه داشتن منطق تعامل از استایل، تغییر ظاهر صفحه و نگهداری کد در آینده ساده تر خواهد بود.

ساختار و پارامترهای toggleClass

در کاربردهای ساده، کافی است انتخابگر و نام کلاس را به متد بدهید. این ساختار، کلاس را در هر بار اجرا از حالت موجود به حالت مخالف می برد:

$(selector).toggleClass(className);

در این ساختار، selector مشخص می کند کدام عنصر یا عناصر هدف قرار بگیرند و className نام کلاسی است که باید تغییر کند. انتخابگر می تواند یک تگ، کلاس، شناسه یا ترکیبی از چند انتخابگر باشد.

در مستندات یا نمونه های قدیمی ممکن است ساختار چندپارامتری زیر را ببینید. شکل دقیق پارامترهای تابع به نسخه jQuery وابسته است؛ بنابراین برای کد جدید، مستندات نسخه مورد استفاده در پروژه را بررسی کنید.

$(selector).toggleClass(className, function(index, currentClass), state);

در بسیاری از کاربردهای روزمره، به آرگومان تابع یا وضعیت صریح نیاز ندارید. استفاده از نام کلاس به تنهایی، ساده ترین شکل این متد است. از پارامترهای بیشتر زمانی استفاده کنید که بخواهید وضعیت کلاس را مستقیم تعیین کنید یا نام آن را بر اساس اطلاعات عنصر بسازید.

مثال ساده برای افزودن و حذف کلاس

فرض کنید چند عنوان و پاراگراف در صفحه دارید و می خواهید با اجرای متد، کلاس blue را روی همه آن ها تغییر دهید. انتخابگرهای جداشده با ویرگول چند گروه از عناصر را هم زمان هدف می گیرند:

$("h1, h2, p").toggleClass("blue");

اگر کلاس blue روی عنصری وجود نداشته باشد، به آن اضافه می شود. اگر از قبل روی آن عنصر باشد، حذف می شود. این عملیات برای هر عنصر به طور مستقل انجام می شود؛ بنابراین ممکن است کلاس از بعضی عناصر حذف و به بعضی دیگر اضافه شود.

برای دیدن نتیجه در صفحه، باید قانون CSS مربوط به کلاس را نیز تعریف کنید. jQuery کلاس را تغییر می دهد، اما مشخصات رنگ، پس زمینه یا اندازه را خودش تعیین نمی کند:

.blue {
  color: blue;
  background-color: #eef5ff;
}

کد بالا را در فایل CSS یا بخش استایل صفحه قرار دهید. سپس با اجرای دستور jQuery، ظاهر عناصر انتخاب شده با قانون کلاس هماهنگ می شود. اگر کلاس در CSS تعریف نشده باشد، ممکن است تغییر آن در ظاهر صفحه قابل مشاهده نباشد؛ در این حالت ابتدا ابزار توسعه مرورگر را برای بررسی کلاس عنصر باز کنید.

اجرای toggleClass با رویداد کلیک

در یک صفحه واقعی، تغییر کلاس معمولاً در واکنش به رویداد کاربر انجام می شود. در نمونه زیر، کلیک روی دکمه باعث تغییر کلاس یک کادر خواهد شد:

$("#changeButton").on("click", function() {
  $("#message").toggleClass("highlight");
});

برای کامل شدن مثال، باید عناصر HTML متناظر و قانون CSS را نیز داشته باشید:

<button id="changeButton" type="button">تغییر ظاهر</button>
<p id="message">این متن با کلیک روی دکمه تغییر می کند.</p>

.highlight {
  color: #163b69;
  background-color: #dcecff;
  padding: 12px;
}

در این مثال، دکمه رویداد کلیک را دریافت می کند و متد روی عنصر دارای شناسه message اجرا می شود. با هر کلیک، وضعیت کلاس highlight برعکس خواهد شد. اگر می خواهید کاربر از نظر دسترس پذیری نیز وضعیت کنترل را بهتر درک کند، متن دکمه را واضح انتخاب کنید و تغییر ظاهری را تنها راه انتقال اطلاعات قرار ندهید.

همچنین اطمینان پیدا کنید که jQuery پیش از اجرای این کد بارگذاری شده و عناصر هدف در صفحه وجود دارند. اگر اسکریپت در بخش بالایی سند اجرا می شود، آن را پس از آماده شدن صفحه اجرا کنید یا جای مناسبی برای بارگذاری آن در نظر بگیرید. این کار از انتخاب نشدن عنصر در زمان اجرا جلوگیری می کند.

تعیین وضعیت کلاس با مقدار بولی

گاهی به جای تغییر خودکار وضعیت، می خواهید کلاس حتماً اضافه یا حتماً حذف شود. در نسخه های پشتیبانی کننده، می توانید از مقدار بولی استفاده کنید:

$("#panel").toggleClass("open", true);

وقتی مقدار true باشد، کلاس در وضعیت فعال قرار می گیرد؛ با false، کلاس حذف می شود. این حالت زمانی مفید است که وضعیت عنصر را از یک متغیر یا نتیجه یک شرط می گیرید و نمی خواهید هر بار فقط وضعیت قبلی را برعکس کنید.

var isOpen = true;
$("#panel").toggleClass("open", isOpen);

تفاوت مهم این شیوه با استفاده از نام کلاس به تنهایی، قابل پیش بینی بودن نتیجه است. اجرای چندباره دستور با مقدار ثابت، همان وضعیت را حفظ می کند؛ اما اجرای چندباره toggleClass("open") در هر بار اجرا وضعیت را عوض می کند. این تفاوت هنگام به روزرسانی رابط کاربری بر اساس داده ها اهمیت دارد.

برای مثال، اگر مقدار متغیر از وضعیت یک منو، پاسخ یک درخواست یا نتیجه اعتبارسنجی فرم به دست می آید، تعیین قطعی وضعیت می تواند از ناهمخوانی رابط کاربری جلوگیری کند. در مقابل، برای یک دکمه ساده که باید هر بار حالت را عوض کند، شکل کوتاه متد معمولاً خواناتر است.

استفاده از چند کلاس و تابع

می توانید چند نام کلاس را برای تغییر هم زمان مشخص کنید. نام ها باید با فاصله از هم جدا شوند:

$("#card").toggleClass("selected emphasized");

در این مثال، هر دو کلاس selected و emphasized تغییر وضعیت می دهند. برای جلوگیری از تداخل استایل ها، نام های معنادار انتخاب کنید و بررسی کنید قانون های CSS مربوط به آن ها با یکدیگر ناسازگار نباشند.

اگر لازم است نام کلاس با توجه به شماره عنصر یا وضعیت فعلی آن تعیین شود، در شکل های مناسب jQuery می توانید تابعی به متد بدهید. تابع برای هر عنصر فراخوانی می شود و نتیجه آن، نام کلاس یا کلاس هایی است که باید تغییر کنند:

$(".item").toggleClass(function(index, currentClass) {
  return index % 2 === 0 ? "even-item" : "odd-item";
});

در نمونه بالا، عناصر با توجه به جایگاه خود یکی از دو کلاس را دریافت می کنند. نام و آرگومان های تابع ممکن است بر اساس نسخه jQuery و شکل فراخوانی متفاوت باشند؛ پیش از استفاده در پروژه، سازگاری کد را با نسخه نصب شده بررسی کنید. برای موارد ساده، استفاده از نام کلاس ثابت معمولاً نگهداری کد را آسان تر می کند.

کاربردهای رایج در رابط کاربری

این متد زمانی مفید است که لازم باشد وضعیت بصری یک عنصر با تعامل کاربر یا منطق برنامه هماهنگ شود. کاربردهای متداول آن عبارت اند از:

• فعال یا غیرفعال نشان دادن گزینه: کلاس جداگانه ای برای گزینه انتخاب شده تعریف کنید تا کاربر انتخاب خود را در فهرست تشخیص دهد.
• تغییر ظاهر پیام: با افزودن کلاس مناسب، پیام خطا، هشدار یا موفقیت را از محتوای معمولی متمایز کنید.
• مشخص کردن کارت انتخاب شده: در فهرست محصولات یا گزینه ها، کلاس فعال می تواند انتخاب جاری را روشن کند.
• تغییر حالت منو: از کلاس برای نمایش حالت باز یا بسته منو استفاده کنید و در صورت نیاز وضعیت دسترس پذیری را نیز هماهنگ نگه دارید.
• اعتبارسنجی فرم: پس از بررسی داده ها، کلاس خطا یا موفقیت را به فیلد مناسب اضافه کنید.
• نمایش وضعیت ذخیره شده: ظاهر نشانگر علاقه مندی یا ذخیره شدن یک مورد را با وضعیت واقعی برنامه هماهنگ کنید.

در هر یک از این حالت ها، ابتدا کلاس های CSS را تعریف کنید و بعد با انتخابگر دقیق، عناصر مورد نظر را تغییر دهید. اگر قرار است چند بخش صفحه هم زمان تغییر کنند، منطق برنامه را طوری بنویسید که وضعیت همه بخش ها با یکدیگر هماهنگ بماند. برای مثال، یک منوی باز باید هم از نظر ظاهر و هم از نظر اطلاعات دسترس پذیری در وضعیت باز باشد.

نکته های کاربردی برای نوشتن کد مطمئن

برای استفاده قابل اعتماد از toggleClass، تنها نوشتن یک دستور کافی نیست. انتخابگر، تعریف CSS، رویداد فراخوانی کننده و وضعیت مورد انتظار باید با هم هماهنگ باشند. پیش از افزودن کد به پروژه، رفتار آن را با کلیک های تکراری و در حالت های مختلف صفحه بررسی کنید.

• نام کلاس را روشن انتخاب کنید: نام هایی مانند is-open یا is-selected می توانند هدف کلاس را برای توسعه دهندگان مشخص تر کنند.
• انتخابگر را محدود نگه دارید: انتخابگر دقیق، احتمال تغییر ناخواسته عناصر دیگر صفحه را کاهش می دهد.
• وضعیت واقعی را در نظر بگیرید: اگر وضعیت از داده های برنامه می آید، به جای برعکس کردن کلاس، آن را صریح تنظیم کنید.
• CSS را جداگانه بررسی کنید: تغییر کلاس بدون قانون استایل ممکن است در ظاهر دیده نشود.
• نسخه کتابخانه را بشناسید: پیش از استفاده از قابلیت های وابسته به نسخه، مستندات jQuery پروژه را ببینید.

اشتباه های رایج هنگام استفاده از toggleClass

تعریف نکردن استایل کلاس

اگر کلاس در CSS هیچ قانونی نداشته باشد، اضافه یا حذف شدن آن لزوماً تغییری در ظاهر صفحه ایجاد نمی کند. هنگام بررسی مشکل، ابتدا در ابزار توسعه مرورگر ببینید کلاس روی عنصر تغییر کرده است یا خیر و سپس وجود قانون CSS را کنترل کنید. اگر قانون وجود دارد، احتمال تداخل با اولویت یا ترتیب استایل ها را نیز بررسی کنید.

انتخاب اشتباه عنصر

اگر انتخابگر به هیچ عنصری نرسد، دستور تغییری ایجاد نمی کند و معمولاً پیغام خطای آشکاری هم نمی بینید. شناسه ها، نام کلاس ها و ساختار HTML را بررسی کنید. در انتخاب چند عنصر نیز مطمئن شوید جداکننده ویرگول در جای درست قرار گرفته است.

استفاده از toggle به جای تعیین وضعیت

اگر کد ممکن است بیش از یک بار یا از چند مسیر اجرا شود، تغییر خودکار وضعیت می تواند نتیجه ناخواسته بسازد. برای نمونه، اجرای دوباره دستور پس از پاسخ یک رویداد، کلاس را دوباره حذف می کند. در چنین شرایطی بهتر است از مقدار بولی برای تعیین وضعیت مورد نظر استفاده کنید.

اشتباه گرفتن تغییر کلاس با نمایش و پنهان کردن

toggleClass به تنهایی عنصر را مخفی یا آشکار نمی کند؛ فقط کلاس را تغییر می دهد. اگر هدف تغییر نمایش است، باید کلاس CSS ویژگی مناسب مانند display یا visibility داشته باشد. انتخاب ویژگی مناسب به ساختار صفحه و نیازهای دسترس پذیری بستگی دارد.

نادیده گرفتن نسخه jQuery

قابلیت ها و شکل بعضی از امضاهای متد در نسخه های مختلف تغییر کرده اند. اگر نمونه ای قدیمی در پروژه جدید اجرا نمی شود، نسخه jQuery را بررسی و امضای پشتیبانی شده را با مستندات همان نسخه مقایسه کنید. برای پروژه های تازه نیز استفاده از ساختارهای ساده و روشن، نگهداری کد را آسان تر می کند.

جدول خلاصه رفتار متد

جمع بندی

متد toggleClass در jQuery برای تغییر وضعیت کلاس های CSS راهکاری ساده و کاربردی است. با استفاده از آن می توانید بدون نوشتن شرط های تکراری، کلاس را در صورت نیاز اضافه یا حذف کنید و ظاهر عناصر را با تعامل کاربر هماهنگ سازید. این متد برای تغییر حالت دکمه ها، کارت ها، منوها و پیام های صفحه مناسب است.

برای استفاده درست، انتخابگر مناسب بنویسید، کلاس مورد نظر را در CSS تعریف کنید و در موقعیت هایی که وضعیت باید قطعی باشد، از مقدار بولی پشتیبانی شده در نسخه jQuery خود کمک بگیرید. توجه به این نکته ها باعث می شود کد قابل پیش بینی تر باشد و رابط کاربری به شکل منسجم تری تغییر کند.

سوالات متداول متد toggleClass در jQuery