JavaScript တွင် data- attribute မှတစ်ဆင့် အလှည့်ကျ စတိုင်များ ပြောင်းလဲခြင်း

ယခင်သင်ခန်းစာတွင် ဖော်ပြခဲ့သော ပြဿနာကို ဖြေရှင်းရန် ကျွန်ုပ်တို့သည် element အတွက် class များ သတ်မှတ်မည်မဟုတ်ဘဲ data- attribute ၏တန်ဖိုးကို ပြောင်းလဲပါမည်။ ၎င်းသည် အဆင်ပြေစေမည့် အချက်မှာ ထို attribute တစ်ခုသည် တန်ဖိုးတစ်ခုသာရှိနိုင်ပြီး အသစ်ရေးသားသောအခါ တန်ဖိုးအဟောင်းသည် အလိုအလျောက် ပျက်စီးသွားမည် ဖြစ်သည်။

ဥပမာအားဖြင့်၊ ဤသို့ဖြင့် ကျွန်ုပ်တို့ အောင်မြင်မှုအတွက် စတိုင်ကို သတ်မှတ်မည်:

<div id="elem" data-type="success">
	စာသား
</div>

အမှားအတွက် စတိုင်ကို ဤသို့ဖြစ်သည်:

<div id="elem" data-type="error">
	စာသား
</div>

ကျွန်ုပ်တို့၏ အခြေအနေများ၏ စတိုင်များကို attribute selectors များမှတစ်ဆင့် သတ်မှတ်မည်:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

ယခုအခါ ကျွန်ုပ်တို့၏ element ကို အောင်မြင်မှု အရောင်ဖြင့် အလွယ်တကူ ခြယ်နိုင်ပါသည်:

elem.dataset.type = 'success';

ဤသို့ဖြင့် အမှား အရောင်ဖြင့် ခြယ်ပါမည်:

elem.dataset.type = 'error';

Input တစ်ခု ပေးထားသည်။ Focus ပျောက်သွားချိန်တွင် ထည့်သွင်းထားသော နံပါတ်ကို စစ်ဆေးပါ။ အကယ်၍ ထိုနံပါတ်သည် တစ်ဆယ်အောက် ဖြစ်ပါက input ကို အစိမ်းရောင်သို့ ပြောင်းပါ၊ တစ်ဆယ်မှ နှစ်ဆယ် ကြားဖြစ်ပါက - အဝါရောင်သို့ ပြောင်းပါ၊ နှစ်ဆယ်ထက် များပါက - အနီရောင်သို့ ပြောင်းပါ။