如何整合此 jQuery 代码?(导航/轮廓突出显示)

Question

现在我正在使用scrollify的当前部分（数据部分名称）来突出显示大纲中的该部分（out-one，out-two等）。

这显然是超级丑陋，重复和繁琐的，但它现在有效。我知道这可以写得更简洁，并希望在简化它方面得到一些帮助！谢谢！

当前代码：

  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;');
    }

Answer 1

一种可能的解决方案是将部分名称映射到选择器。 然后，您可以在映射中查找应该对哪一个执行 if 逻辑，以及应该对哪些执行 else 逻辑。 像...

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;');