همانطور که می دانید ، به علت عدم رعایت استاندارد توسط مرورگرها و انحراف این مرورگر ها از مسیر اصلی و استاندارد JavaScript ، امروز JQuery به کلی جای مادر و سازنده اصلی خود را پر کرده است. امروز قصد داریم تا یکی از بزرگترین اشکالات JavaScript یعنی تغییر کلاس یک عنصر را با JQuery حل و فصل کنیم. اول باید این توضیح را خدمت آن دسته از عزیزانی که موضوع امروز را دقیق متوجه نشده اند عرض کنم که در طراحی ، گاهی اوقات نیاز دارید که در شرایط خاص ، کلاس یک عنصر را تغییر دهید. برای مثال یک DIV را فرض کنید که متد class برای آن ( به فرض ) myClass در نظر گرفته شد است : <div class=”myClass”></div> حال می خواهیم در شرایط مختلفی چون ” قرار گرفتن موس روی عنصر ” ( MouseOver ) ، کلیک ( Click ) ، دابل کلیک ( DoubleClick ) یا … مقدار myClass را به NewClass تغییر دهیم. برای این کار ، پیش از حضور JQuery ، جاوا اسکریپت راه های مختلفی را ارائه کرده بود که متاسفانه به علت عدم رعایت استاندارد توسط مرورگرها ، این کاربرد کلیدی از کار افتاده بود. حال امروز قصد داریم با استفاه از JQuery با این مشکل برای همیشه خداحافظی کنیم. برای شروع ، دو کلاس مختلف را به نام های myClass و NewClass تعریف کنید. برای مثال ، بنده کلاس ها را با متد های زیر تعریف کرده ام : .myClass { background: #000 ; color: #FFF ; } .NewClass { background: #FFF; color: #000 ; } در واقع در کلاس myClass ، رنگ پشت زمینه عنصر مشکی و نوشته سفید است. حال آن که در NewClass ، نوشته سیاه و پشت زمینه سفید است. حال یک Input قرار دهید تا به عنوان کلید عملگر ما در صفحه نقش داشته باشد و البته زمانی که بر روی آن کلیک شد ، تابع myFun را اجرا کند : <input type=”button” onClick=”myFun()” value=”Ok” /> حال DIV خود را نیز به صفحه اضافه کنید و یک متن ساده در آن قرار دهید . فراموش نکنید که برای Select این DIV توسط JQuery نیازمند معرفی یک ID برای DIV خود نیز هستیم: ( در اینجا ما مقدار ID را myDIV قرار داده ایم ) <div class=”myClass” id=”myDiv”>GooyaIT.com</div> دقت نمایید که این کد کل صفحه ای است که تا به حال باید داشته باشید : ( البته ، در کد ، JQuery را نیز فراخوانی کرده ایم ) <!DOCTYPE html> <html> <head> <style> .myClass { background: #000 ; color: #FFF ; } .NewClass { background: #FFF; color: #000 ; } </style> <script src=”http://code.jquery.com/jquery-latest.js”></script> </head> <body> <div>GooyaIT.com</div> <input type=”button” value=”Ok” /> </body></html> * تا به اینجا ، ما در صفحه خود ، ۲ کلاس تعریف کرده ایم ; یک DIV قرار داده ایم و یک کلید که با کلیک بر روی آن ، تابع myFun ( که هنوز آن را تعریف نکرده ایم ) را اجرا کند. حال وقت آن رسیده تا تابع myFun را تعریف کنیم. این تابع را در بین کدهای <head> و </head> خود قرار می دهیم تا پیش از بارگزاری صفحه ، آماده به کار باشند. در JQuery برای اضافه کردن یا تغییر کلاس یک عنصر از تابع addClass استفاده می شود. به صورت زیر : $(“selectObject”).addClass(“ClassName”) در قسمت selectObject باید عنصر خود ( که در مثال ما مقدار #myDIV است ) و در قسمت ClassName باید نام کلاس مورد نظر ( که در مثال ما مقدار NewClass است ) را انتخاب کنیم. حال به مثال خود باز می گردیم. برای معرفی تابع myFun به صورت کد زیر عمل نمایید : <script language=”javascript” type=”text/javascript”> function myFun() { $(“#myDiv”).addClass(“NewClass”); } </script> با اینکار ، زمانی که کاربر روی کلید ما ، کلیک می کند تابع myFun اجرا می شود و به myDiv کلاس NewClass معرفی می شود. بیایید با هم مثال سایت JQuery را در این باره بررسی کنیم : <!DOCTYPE html> <html> <head> <style> p { margin: 8px; font-size:16px; } .selected { color:blue; } .highlight { background:yellow; } </style> <script src=”http://code.jquery.com/jquery-latest.js”></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> <script> $(“p:last”).addClass(“selected”); </script> </body> </html> در این مثال سه کلاس تعریف شده است : کلاس عمومی برای p ( همه پاراگراف ها ) ، کلاس selected ( با رنگ نوشته blue ) و highlight ( با پشت زمینه yellow ). سپس سه پاراگراف قرار داده شده اند. و بعد از آن با کد JQuery پاراگراف آخر انتخاب شده و کلاس selected به آن معرفی شده است. نتیجه نهایی این است مقدار class آخرین پاراگراف به seleted تغییر کرده و رنگ نوشته آن blue می شود. نتیجه به صورت زیر است : Hello and Goodbye این ساده ترین مثال ممکن برای این کار بود. فرض کنید بخواهیم دو کلاس را برای یک عنصر معرفی کنیم ! برای اینکار باید کلاس ها را در تابع addClass با Space از هم متمایز کنیم : $(“p:last”).addClass(“selected highlight”); اگر کد بالا را در مثال قبلی به کار ببریم ، عنصر myDiv علاوه بر اینکه رنگ نوشته blue خواهد داشت پشت زمینه آن نیز yellow خواهد شد . نتیجه : Hello and Goodbye نکته نهایی قابل ذکر این است که ، می توان با تابع removeClass یک کلاس را از یک عنصر حذف کرد. منبع: گویا آی تی
