封装jQuery块重用

Question

我有这个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(); 

还要注意使用css()超过设定style直接使用attr()。这可以通过在外部样式表的一个类中设置display: flex规则并在您的JS代码中使用addClass()来进一步改进。