javascript - 在 jQuery 自定义函数中使用事件

Question

我正在制作一个弹出系统，但在使用 event 作为自定义函数中的属性时遇到一些问题。这是我的代码:

var openLayoutPopup = function(event){
    event.preventDefault();
    var target = $(event.target);
    var flexible_field = target.closest('.acf-field-flexible-content').attr('data-key');
    var popup = $('.'+flexible_field);
    var overlay = $('.bbh-popup-overlay');

    popup.addClass('open').fadeIn();
    overlay.fadeIn();

}

$('.my-class').click(openLayoutPopup(event));

但是我的控制台给出以下错误，指出事件未定义:

ReferenceError: event is not defined

我之前使用过 event.target 和 event.which，但仅适用于未命名的函数。

此外，我还有另一个类似的函数，其中我需要传递事件和辅助 bool 参数:

function closeLayoutPopup(event, openLayout){
    event.preventDefault();

    var popup = $(event.target).closest('.bbh-popup');
    var overlay = $('.bbh-popup-overlay');

    popup.removeClass('open').fadeOut();
    overlay.fadeOut();
    if(open == true){
        var dataLayout = target.attr('data-layout');

        acf.fields.flexible_content.add(dataLayout);
    }
}

同样，我对如何传递该参数感到困惑。

编辑:

我试图做的解释是让一个按钮打开一个弹出窗口。弹出窗口有两个按钮，一个用于关闭弹出窗口，一个用于向页面添加布局并随后关闭。问题是我错误地调用了函数，并且没有意识到我的解决方案是不合逻辑的。

感谢@Raibaz，我修复了点击事件。然后我将 closeLayoutPopup 添加到 addLayout 函数中，而不是组合它们:

/*==============================================
=            Function - Close popup            =
==============================================*/
function closeLayoutPopup(event){
    event.preventDefault();
    var popup = $(event.target).closest('.bbh-popup');
    var overlay = $('.bbh-popup-overlay');

    popup.removeClass('open').fadeOut();
    overlay.fadeOut();
}

/*=============================================
=            Function - Open popup            =
=============================================*/
var openLayoutPopup = function(event){
    event.preventDefault();
    var target = $(event.target);
    var flexible_field = target.closest('.acf-field-flexible-content').attr('data-key');
    var popup = $('.'+flexible_field);
    var overlay = $('.bbh-popup-overlay');

    popup.addClass('open').fadeIn();
    overlay.fadeIn();

}

/*=============================================
=            Function - Add Layout            =
=============================================*/
var addLayout = function(event){
    event.preventDefault();
    var target = $(event.target);
    var dataLayout = target.attr('data-layout');                

    acf.fields.flexible_content.add(dataLayout);
    closeLayoutPopup();
}

/*----------  add section click - open popup  ----------*/
$('.acf-field-flexible-content .acf-flexible-content > .acf-actions a.acf-button').on('click',openLayoutPopup);     

/*----------  Close button click  ----------*/
$('.layout-picker-close').on('click', closeLayoutPopup);

/*----------  Add layout  ----------*/
$('.bbh-popup a.add-layout-button').on('click', addLayout);

Answer 1

我假设您想在单击具有 my-class 类的元素时打开布局弹出窗口，因此您的代码应如下所示:

$('.my-class').on('click', openLayoutPopup);

调用openLayoutPopup回调函数时，事件参数将传递给该函数。

您可以查看 jQuery.on 的文档供引用。

对于另一个函数，您可以使用自定义 CSS 类或数据属性来指示有一个打开的弹出窗口，而不是将第二个 bool 参数传递给单击事件处理程序，因此您的 openLayoutPopup 函数可以包含这样的内容:

$('body').addClass('has-popup')

在 closeLayoutPopup 中，您只需检查该类是否存在即可确定是否存在打开的弹出窗口，并最终在关闭弹出窗口时将其删除。