I have switch that need's to add or remove class. In my .ts file I have:
export default class extends Controller {
static targets = [
"InformationOne",
"InformationTwo",
"InformationThree",
"InformationFour",
"InformationSwitchOne",
"InformationSwitchTwo"
];
private InformationOne: HTMLElement[];
private InformationTwo: HTMLElement[];
private InformationThree: HTMLElement[];
private InformationFour: HTMLElement[];
private InformationSwitchOne: HTMLInputElement;
private InformationSwitchTwo: HTMLInputElement;
switchInformation(): void {
if (this.InformationSwitchOne.checked) {
this.InformationOne.forEach((item) => { item.classList.remove("d-none"); });
this.InformationTwo.forEach((item) => { item.classList.add("d-none"); });
this.InformationThree.forEach((item) => { item.classList.add("d-none"); });
this.InformationFour.forEach((item) => { item.classList.add("d-none"); });
} else if (this.InformationSwitchTwo.checked) {
this.InformationTwo.forEach((item) => { item.classList.remove("d-none"); });
this.InformationOne.forEach((item) => { item.classList.add("d-none"); });
this.InformationThree.forEach((item) => { item.classList.add("d-none"); });
this.InformationFour.forEach((item) => { item.classList.add("d-none"); });
}
}
}
Now question is, how to make lines below more elegant? Is there a way to grab this three elements and perform on them classList.add rather then getting them one by one?
this.InformationTwo.forEach((item) => { item.classList.add("d-none"); });
this.InformationThree.forEach((item) => { item.classList.add("d-none"); });
this.InformationFour.forEach((item) => { item.classList.add("d-none"); })
This can be simplified:
this.InformationTwo .forEach((item) => { item.classList.add("d-none"); });
this.InformationThree.forEach((item) => { item.classList.add("d-none"); });
this.InformationFour .forEach((item) => { item.classList.add("d-none"); })
...to this:
const all = this.InformationTwo.concat( this.InformationThree ).concat( this.InformationFour );
for( const inp of all ) {
inp.classList.toggle( 'd-none', /*force:*/ this.InformationSwitchOne.checked );
}
As you describe in your last comment, you basically have a mapping of lists and switches and want to show the items for each switch, correct?
Then you can do something like this:
switchInformation(): void {
// a mapping which items are shown for which switch
const mapping = [
// [HTMLInputElement, HTMLElement[]]
[this.InformationSwitchOne, this.InformationOne],
[this.InformationSwitchTwo, this.InformationTwo],
[this.InformationSwitchThree, this.InformationThree],
[this.InformationSwitchFour, this.InformationFour],
];
for (const [{ checked }, items] of mapping) {
for (const item of items) {
// toggle "d-none" based on wether the switch is checked or not.
item.classList.toggle("d-none", !checked);
}
}
}
And if the mapping doesn't change you can even move that out of the function.