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

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

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

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

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

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

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

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

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

javascriptelem.dataset.type = 'success';

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

javascriptelem.dataset.type = 'error';