再利用のためにjQueryブロックをカプセル化する

Question

私はもともと1回だけ使用する予定だったこのjQueryコードを持っていますが、今では複数のインスタンスで使用する必要がありますが、コードカプセル化には慣れていません。

だから私の質問は、最初のブロックされています

$('.share-checklist-trigger').click(function() { 
    $('body').addClass('no-overflow'); 
    $(document).scrollTop(-1); 
    $('.widget-top-drawer.share-checklist-drawer').slideToggle(244, "linear").dimBackground({ 
     darkness: 0.2 
    }); 
    $('.widget-top-drawer-header').slideToggle(244, "linear").attr('style', 'display: flex;'); 
    $('.dashboard-main').addClass('top-draw-out'); 
}).stop(); 

別のオブジェクト参照から変更されます物事はメインクラス.widget-top-drawer.share-checklist-drawer、例えば後にクラスであります - .share-checklist-drawerが他のものになり、メインセレクタなどがあります。 - .share-checklist-trigger

これを一種のプラグイン型ブロックにすると、同じコードを何度も繰り返し貼り付けることなく複数のオブジェクトで使用できるようになりますか？

Answer 1

このためにプラグイン全体を作成する必要はありません。代わりに、共通の.share-checklist-triggerクラスを使用して、必要な要素をグループ化することができます。これらの要素にdata属性を配置して、イベントハンドラ内で実行されたロジックを変更することができます。これを試してみてください：

<div class="share-checklist-trigger" data-target=".widget-top-drawer.share-checklist-drawer">Foo</div> 
<div class="share-checklist-trigger" data-target=".fizz.buzz">Bar</div> 

$('.share-checklist-trigger').click(function() { 
    var target = $(this).data('target'); 
    $('body').addClass('no-overflow'); 
    $(document).scrollTop(-1); 
    $(target).slideToggle(244, "linear").dimBackground({ 
     darkness: 0.2 
    }); 
    $('.widget-top-drawer-header').slideToggle(244, "linear").css('display', 'flex'); 
    $('.dashboard-main').addClass('top-draw-out'); 
}).stop(); 

はまた、直接attr()を使用してstyleを設定する上でcss()の使用を注意してください。外部スタイルシートのクラスにdisplay: flexルールを設定し、JSコードにaddClass()を使用すると、これをさらに改善できます。