JavaScript-ում դասերի անհարմարությունը

Ենթադրենք, մենք ունենք մի քանի դասեր հաղորդագրությունների ձևավորման համար.

css.success {
  color: green;
}
.warning {
  color: orange;
}
.error {
  color: red;
}

Ենթադրենք, որոշակի տարրում մենք ցուցադրել ենք հաջողված հաղորդագրություն և նշանակել ենք դրան հաջողությանը համապատասխանող դաս.

javascriptelem.classList.add('success');

Ենթադրենք, այժմ մենք նույն տարրում ցուցադրել ենք սխալի մասին հաղորդագրություն և նշանակել ենք դրան սխալին համապատասխանող դաս.

javascriptelem.classList.add('error');

Արդյունքում կստացվի, որ տարրում կլինեն երկու միմյանց հետ հակասող դասեր.

html<div id="elem" class="success error">
  text
</div>

Ստացվում է, որ նոր դաս ավելացնելուց առաջ, մեզ նախ պետք է հեռացնել նախորդ դասը.

javascriptelem.classList.remove('success');
elem.classList.add('error');

Սա այնքան էլ հարմար չէ, քանի որ մենք կարող ենք չիմանալ, թե որն էր կոնկրետ նախորդ դասը, և մեզ ստիպված կլինենք հեռացնել բոլոր դասերը հերթականությամբ.

javascriptelem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');