0

现在我正在使用 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;');
    }
4

1 回答 1

0

一种可能的解决方案是将部分名称映射到选择器。然后，您可以在地图中查找应该执行 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;');
于 2017-11-01T22:54:28.010 回答