このjQueryコードを統合するにはどうすればよいですか？（ナビゲーション/アウトラインの強調表示）

debugcn 投稿 Dev

DHilse

現在、scrollifyの現在のセクション（data-section-name）を使用して、アウトライン内のそのセクション（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;');
    }

タプラー

考えられる解決策の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;');

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]