2
\$\begingroup\$

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); 
 });
\$\endgroup\$
2
\$\begingroup\$

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');
    }    
}
\$\endgroup\$
  • 1
    \$\begingroup\$ Your test if (certs[i])doesn't make sense. It needs to be if ($this.data(certs[i])). \$\endgroup\$ – RoToRa Jun 15 '16 at 14:53
  • 1
    \$\begingroup\$ Nice solution, but let me add that this does not take into account the special handling of (certExpress == "X") \$\endgroup\$ – Mike Scotty Jun 15 '16 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.