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\$
0

1 Answer 1

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\$
2
  • 1
    \$\begingroup\$ Your test if (certs[i])doesn't make sense. It needs to be if ($this.data(certs[i])). \$\endgroup\$
    – RoToRa
    Jun 15, 2016 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\$ Jun 15, 2016 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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