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()，可以进一步改进这一点。

封装jQuery块以供重用

1 个答案: