Event handler for conditions

Question

I am trying to detect whether a condition is being returned true or false. The only problem is, I have a bunch of if/else statements. Is it possible to refactor this in less lines? Maybe a for loop or re-writing my markup?

$(document).on('click', '.cert-modal-btn', function(event) {
event.preventDefault();
 var $this = $(this); 
 certNcv = $this.data("ncv"),
 certDealer = $this.data("cert"),
 certExpress = $this.data("express"),
 certOne = $this.data("dealone"),
 certPromise = $this.data("iscustomer"),
 certEcomm = $this.data("isecomm"),
 $tabbedMenu = $('.tabbed-menu').find('li'),
 $certsDescription = $('.certs-description').find('li');
if(certNcv) {
 console.log("certNcv is true");
 $tabbedMenu.eq(0).removeClass('hidden-item');
 $certsDescription.eq(0).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(0).addClass('hidden-item');
 $certsDescription.eq(0).addClass('hidden-item');
}
if (certExpress == "X") {
 console.log("certExpress is X");
 $tabbedMenu.eq(1).removeClass('hidden-item');
 $certsDescription.eq(1).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(1).addClass('hidden-item');
 $certsDescription.eq(1).addClass('hidden-item');
}
if(certEcomm) {
 console.log("certEcomm is true");
 $tabbedMenu.eq(2).removeClass('hidden-item');
 $certsDescription.eq(2).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(2).addClass('hidden-item');
 $certsDescription.eq(2).addClass('hidden-item');
}
if(certOne) {
 console.log("certOne is true");
 $tabbedMenu.eq(3).removeClass('hidden-item');
 $certsDescription.eq(3).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(3).addClass('hidden-item');
 $certsDescription.eq(3).addClass('hidden-item');
}
if(certPromise) {
 console.log("certPromise is true");
 $tabbedMenu.eq(4).removeClass('hidden-item');
 $certsDescription.eq(4).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(4).addClass('hidden-item');
 $certsDescription.eq(4).addClass('hidden-item');
}
if(certDealer) {
 console.log("certDealer is true");
 $tabbedMenu.eq(5).removeClass('hidden-item');
 $certsDescription.eq(5).removeClass('hidden-item');
}
else {
 $tabbedMenu.eq(5).addClass('hidden-item');
 $certsDescription.eq(5).addClass('hidden-item');
}
// console.log(certNcv);
// console.log(certDealer); 
 });

Answer 1

If you start with an array:

let certs = ["ncv", "cert", "express", "dealone", "iscustomer", "isecomm"];

then it reduces down to a for loop.

for (int i = 0; i < certs.length; i++) {
 if ($this.data(certs[i])) {
 console.log(certs[i] + " is true");
 $tabbedMenu.eq(i).removeClass('hidden-item');
 $certsDescription.eq(i).removeClass('hidden-item');
 }
 else {
 $tabbedMenu.eq(i).addClass('hidden-item');
 $certsDescription.eq(i).addClass('hidden-item');
 } 
}

• RoToRa: Your test if (certs[i])doesn't make sense. It needs to be if ($this.data(certs[i])).
• Mike Scotty: Nice solution, but let me add that this does not take into account the special handling of (certExpress == "X")