jQuery တွင် toggleClass နည်းလမ်းကို အသုံးပြုခြင်း

အသုံးဝင်သော toggleClass ဟူသည့် နည်းလမ်းလည်း ရှိပြီး၊ ၎င်းသည် သတ်မှတ်ထားသော class မရှိပါက ထည့်ပေးကာ ရှိပါက ဖယ်ရှားပေးသည်။ တစ်ခါတစ်ရံတွင် တူညီသော ခလုတ်ကို နှိပ်ခြင်းဖြင့် စာမျက်နှာအင်္ဂါရပ်တစ်ခုနှင့် ပတ်သက်၍ အပြောင်းအလဲများ ပြုလုပ်လိုသည့်အခါ လိုအပ်နိုင်ပါသည်။

ဥပမာတစ်ခုဖြင့် ဤနည်းလမ်းကို လေ့လာကြည့်ပါ။ ကျွန်ုပ်တို့တွင် အောက်ပါ CSS style များ ရှိသည်ဆိုပါစို့:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

ထို့အပြင် class zzz ပါသော စာပိုဒ်တစ်ခုလည်း ရှိပါသည်:

<p class="zzz" id="test">text</p>
<button>click</button>

ဥပမာအနေဖြင့်၊ ခလုတ်ကို ပထမဆုံးအကြိမ် နှိပ်လိုက်သောအခါ class red ကို element ထံသို့ ထည့်ပေးပြီး အနီရောင် အရောင်ထွက်လာမည်။ ဒုတိယအကြိမ် နှိပ်လိုက်သောအခါ class ကို ဖယ်ရှားကာ အနီရောင် ပျောက်သွားမည် ဖြစ်အောင် ပြုလုပ်ကြည့်ပါ။ ထို့နောက် ခလုတ်ကို ထပ်မံနှိပ်ပါက ထပ်ခါထပ်ခါ ဖြစ်လာမည် ဖြစ်သည်။

အောက်ပါကုဒ်ကို ဖွင့်၍ စမ်းသပ်ကြည့်ပါ (class zzz သည် စာလုံးစောင်းကို ပြသရန် ဖြစ်ပြီး၊ toggleClass သည် အခြားသော class များ လုပ်ဆောင်ခြင်းကို အနှောင့်အယှက် မပေးကြောင်း ပြသရန် ဖြစ်သည်):

$('button').click(function() {
	$('#test').toggleClass('red');
});

ပထမဆုံးအကြိမ် နှိပ်ပြီးနောက် HTML ကုဒ်သည် အောက်ပါအတိုင်း ဖြစ်လာမည် (class red ထည့်သွင်းမည်):

<p class="zzz red" id="test">text</p>
<button>click</button>

ဒုတိယအကြိမ် နှိပ်ပြီးနောက်တွင် အောက်ပါအတိုင်း ဖြစ်လာမည် (class red ပျောက်သွားမည်):

<p class="zzz" id="test">text</p>
<button>click</button>

li အားလုံးတွင် class www မရှိပါက ထည့်ပေးပြီး၊ ရှိပါက ဖယ်ရှားပေးပါ။