mercredi 15 juin 2016

Refactor multiple if staments in event handler

I am trying to detect wether a condition is being returned true or false. 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 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); 
}); 

Aucun commentaire:

Enregistrer un commentaire