当前元素上的JavaScript切换类

Question

Just want to understand a principle of JavaScript, I'm a bit new to this.

I'm adding some styling to some element which are slides which I'm scrolling through.

The "current" div have a transform: none applied, the two others get styled depending on where I am on the slider.

I'm using this code which is working fine.

el.style.transform = i === e.current ? 'none' : i > e.current ? 'translateX(100%)' : 'translateX(-100%)'

My question is how do I add / toggle a class to the current el , and remove it back when it's not the current anymore.

I've tried some couple options using the same principle but can't find the right way to achieve it.

el.classList = i === e.current.toggle('classname') : i > ? e.current.toggle('classname')

el.classList.toggle() = i === e.current ? 'active' : i > e.current ? 'prev' : 'next'

Can somebody give me a heads up on how to achieve what i want to do? I've tried to go through some others post on Stack Overflow and to look on element.classList docs everywhere i could find it, but I'm stuck at this point and JS knowledge is not my strong point.

Thanks!

Answer 1

toggle takes the class name eg el.classList.toggle('classname') . You don't pass a variable to a function like this el.classList.toggle() = 'classname' . But you might be better off calling add or remove depending on if the item is the current one since you also need to ensure the other classes aren't still there.

el.classList[i === e.current ? 'add' : 'remove']('active');

However since you also want prev and next probably best not to try and be too clever with ternaries and make it readable:

if (i > e.current) {
  el.classList.remove('current', 'prev');
  el.classList.add('next');
} else if (i < e.current) {
  el.classList.remove('current', 'next');
  el.classList.add('prev');
} else {
  el.classList.remove('prev', 'next');
  el.classList.add('current');
}

If you aren't worried about overwriting other classes you could simplify this using className as it overwrites any existing classes:

if (i > e.current) {
  el.className = 'next';
} else if (i < e.current) {
  el.className = 'prev';
} else {
  el.className = 'current';
}