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

متد addClass() یکی از متدهای jQuery برای مدیریت کلاس‌های CSS است. این متد نام کلاس را دریافت می‌کند و آن را به کلاس‌های موجود عنصر یا عناصر انتخاب‌شده اضافه می‌کند. در نتیجه، قواعدی که برای آن کلاس در CSS تعریف شده‌اند روی همان عناصر اثر می‌گذارند.

برای نمونه، فرض کنید در صفحه چند کادر دارید و می‌خواهید هنگام کلیک کاربر، یکی از آن‌ها با رنگ متفاوت نمایش داده شود. می‌توانید یک کلاس مانند important در فایل CSS تعریف کنید و با addClass() آن را به کادر موردنظر بیفزایید. این روش، ظاهر را از منطق برنامه جدا نگه می‌دارد و تغییر طراحی را ساده‌تر می‌کند.

ساختار پایه این متد از انتخابگر jQuery و سپس فراخوانی addClass() تشکیل می‌شود. انتخابگر مشخص می‌کند کدام عنصر یا عناصر هدف هستند و رشته داخل پرانتز، نام کلاسی است که باید به آن‌ها افزوده شود.

$("selector").addClass("className");

در مثال زیر، انتخابگر div همه تگ‌های div صفحه را پیدا می‌کند و کلاس important به آن‌ها افزوده می‌شود. این همان الگوی کلی مثال در آموزش jQuery است:

$("div").addClass("important");

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

.important {
  color: #c00;
  font-weight: bold;
}

برای هدف گرفتن یک عنصر مشخص، می‌توانید از شناسه یا کلاس HTML آن استفاده کنید. فرض کنید یک دکمه با شناسه saveButton دارید و می‌خواهید کلاس is-ready را به آن اضافه کنید. انتخاب با شناسه باعث می‌شود تغییر فقط روی همان عنصر انجام شود.

$("#saveButton").addClass("is-ready");

اگر قصد دارید چند عنصر هم‌نوع یا هم‌کلاس را تغییر دهید، انتخابگر را متناسب با ساختار صفحه بنویسید. برای مثال، انتخابگر .notice همه عناصری را هدف می‌گیرد که کلاس notice دارند. بهتر است انتخابگر دقیق باشد تا تغییر ناخواسته‌ای در بخش‌های دیگر صفحه رخ ندهد.

$(".notice").addClass("is-visible");

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

$(".panel").addClass("panel-active highlighted");

در CSS نیز هر کلاس می‌تواند مسئولیت مشخصی داشته باشد. تقسیم قواعد به کلاس‌های کوچک‌تر باعث می‌شود بتوانید ظاهر بخش‌ها را دوباره استفاده کنید و هنگام نگهداری پروژه، سریع‌تر متوجه شوید هر قاعده برای چه منظوری نوشته شده است.

یکی از کاربردهای رایج این متد، تغییر ظاهر صفحه در واکنش به رفتار کاربر است. به عنوان مثال، می‌توان هنگام کلیک روی یک دکمه، کلاس وضعیت را به یک پیام افزود تا پیام برجسته شود. برای این کار، کد jQuery را به رویداد مناسب متصل می‌کنیم.

$("#showMessage").on("click", function () {
  $("#message").addClass("is-visible");
});

در این نمونه، انتخابگر نخست دکمه را پیدا می‌کند و رویداد کلیک را به آن متصل می‌سازد. پس از کلیک، انتخابگر دوم پیام را پیدا می‌کند و کلاس is-visible را می‌افزاید. سپس CSS می‌تواند نمایش پیام را کنترل کند.

متد addClass() فقط برای افزودن کلاس است. اگر لازم باشد کلاسی را حذف کنید، jQuery متد removeClass() را در اختیار می‌گذارد. برای جابه‌جایی میان دو وضعیت نیز toggleClass() گزینه مناسبی است؛ این متد با توجه به وضعیت فعلی، کلاس را اضافه یا حذف می‌کند.

انتخاب میان این متدها به رفتاری بستگی دارد که می‌خواهید بسازید. اگر قرار است کلیک کاربر هر بار وضعیت فعال را عوض کند، استفاده از toggleClass() معمولا روشن‌تر است. اما اگر هدف، افزودن قطعی یک کلاس در یک مرحله مشخص باشد، addClass() انتخاب مستقیم‌تری است.

برای آنکه کد قابل نگهداری بماند، نام کلاس‌ها را معنادار انتخاب کنید. نام‌هایی مانند is-active یا has-error معمولا وضعیت عنصر را بهتر از نام‌های مبهمی مثل red توضیح می‌دهند. در این صورت، تغییر رنگ یا طراحی بعدی به تغییر نام کلاس وابسته نخواهد بود.

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

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

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

$(document).ready(function () {
  $(".notice").addClass("is-visible");
});

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

در نمونه زیر، یک دکمه و یک پیام داریم. با کلیک روی دکمه، کلاس is-visible به پیام اضافه می‌شود. این نمونه را می‌توانید در یک صفحه آزمایشی قرار دهید و با تغییر قواعد CSS، نتیجه را متناسب با طراحی خود تنظیم کنید.

<button id="showMessage">نمایش پیام</button>
<p id="message">این یک پیام نمونه است.</p>

<script>
$(document).ready(function () {
  $("#showMessage").on("click", function () {
    $("#message").addClass("is-visible");
  });
});
</script>

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

#message {
  display: none;
}

#message.is-visible {
  display: block;
}

متد addClass راهکاری کاربردی برای افزودن کلاس CSS به یک یا چند عنصر در jQuery است. با استفاده از انتخابگر درست، نام‌گذاری معنادار و تعریف قواعد هماهنگ در CSS، می‌توانید وضعیت عناصر را در پاسخ به رویدادها تغییر دهید و کد خود را خواناتر نگه دارید.

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