JavaScript toggle class on current element

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!

Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — Vitalii Chmovzh, Feb 10 '18 at 16:00
@Dipakchavda. You want to have a look at all my attempts on how to achieve it ? Most of them are not on my code anymore, as i'm testing then delete them on the fly. I do know how to add/toggle/remove a class through javascript. i've tried to toggle class on the current element, but the only thing it's doing is indeed toggle the class but on all my el, not just the el which is the current one. — savagebiggie, Feb 10 '18 at 16:04
I mean to say , just post whole code so we can give solutions of your question. — Dipak, Feb 10 '18 at 16:04

Dominic · Accepted Answer · 2018-02-10T17:17:08.113

toggle takes the class name e.g. 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';
}

you're the man. Everything work as expected. Thanks for the explanation, really appreciate it. I think i tried to much trying to replicate that using the code i was using to add styling, but yes, checking if the class is present using a simple condition did the trick. thanks again. — savagebiggie, Feb 10 '18 at 16:12

JavaScript toggle class on current element

1 Answers1