متد toggleClass( class ) در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 02 مرداد 1401

متد toggleClass( class ) در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. این متد کلاس مشخص شده را در صورت عدم وجود اضافه می‌کند و در صورت وجود کلاس مشخص شده را حذف می‌کند.

ساختار متد

در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

selector.toggleClass( class )

پارامترهای متد toggleClass( class ) در jQuery

در اینجا تمام پارامترهای استفاده شده توسط این متد توضیح داده شده است:

class : این پارامتر نام کلاس CSS است

مثال

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

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p#pid").click(function () {
               $(this).toggleClass("red");
            });
         });
      </script>
		
      <style>
         .red { color:red; }
      </style>
   </head>
	
   <body>
      <p class = "green">Click following line to see the result</p>
      <p class = "red" id = "pid">This is first paragraph.</p>
   </body>
</html>

مطالعه مقاله مرجع Html/Css در jQuery برای دسترسی به لیست کامل متدهای Html/Css در جی کوئری به شما پیشنهاد می‌شود؛ امیدواریم از مطالعه این مقاله آموزش jQuery لذت برده باشید. لطفاً نظرات خود را با ما به اشتراک بگذارید و سئوالات خود را در بخش نظرات مطرح کن

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊