How can I consolidate this jQuery code? (navigation/outline highlighting)

Question

Right now I'm using scrollify's current section (data-section-name) to highlight that section in my outline (out-one, out-two, etc.).

This is obviously super ugly, repetitive, & cumbersome, but it works right now. I know this can be written more succinctly & would love some help in streamlining it! Thanks!

Current code:

  if($.scrollify.current().attr('data-section-name') === 'part-one-bee'){
        $(".out-one").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-one").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }

           if($.scrollify.current().attr('data-section-name') === 'part-two'){
        $(".out-two").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-two").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }
                         if($.scrollify.current().attr('data-section-name') === 'part-one-three'){
        $(".out-three").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-three").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }

           if($.scrollify.current().attr('data-section-name') === 'part-four'){
        $(".out-four").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-four").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }

                         if($.scrollify.current().attr('data-section-name') === 'part-five'){
        $(".out-five").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-five").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }
                         if($.scrollify.current().attr('data-section-name') === 'part-one-six'){
        $(".out-six").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-six").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }

           if($.scrollify.current().attr('data-section-name') === 'part-seven'){
        $(".out-seven").attr('style', 'font-size:24px!important;opacity:1;padding:10px;');
    } else {
        $(".out-seven").attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
    }

score 0 · Accepted Answer · answered Nov 01 '17 at 22:54

One possible solution would be to make a map of section name to selector. Then you can look up in the map which one the if logic should be performed on, and which ones the else logic should be performed on. Something like...

var targetSelectorsBySectionName = {
  'part-one-bee': '.out-one',
  'part-two': '.out-two',
  'part-one-three': '.out-three',
  'part-four': '.out-four',
  'part-five': '.out-five',
  'part-one-six': '.out-six',
  'part-seven': '.out-seven'
};

var allSelectors = Object.values(targetSelectorsBySectionName).join(',');
var targetSelector = targetSelectorsBySectionName[$.scrollify.current().attr('data-section-name')];

//perform the else logic on all of them, except the target
$(allSelectors).not(targetSelector).attr('style', 'font-size:16px!important;opacity:.4;padding:0px;');
//perform the if logic on the target
$(targetSelector).attr('style', 'font-size:24px!important;opacity:1;padding:10px;');

How can I consolidate this jQuery code? (navigation/outline highlighting)

1 Answers1