如何合并这些jQuery代码？(导航/大纲突出显示)

Question

现在，我正在使用scrollify的当前部分(数据部分-名称)在我的大纲中突出显示该部分(out-1，out-2，等等)。

这显然是超级丑陋，重复，和麻烦，但它现在工作。我知道这可以写得更简洁&希望能在精简它方面有所帮助！谢谢!

当前代码：

  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逻辑，以及应该在哪个映射上执行其他逻辑。就像..。

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