تغییر کلاس عناصر با استفاده از JQuery
بنام خدا – سلام
همانطور که می دانید ، به علت عدم رعایت استاندارد توسط مرورگرها و انحراف این مرورگر ها از مسیر اصلی و استاندارد 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>
* تا به اینجا ، ما در صفحه خود ، 2 کلاس تعریف کرده ایم ; یک 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 یک کلاس را از یک عنصر حذف کرد.
ممنون واقعان ممنون خیلی به دردم خورد