我正在制作一个弹出系统,但在使用 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);
最佳答案
我假设您想在单击具有 my-class
类的元素时打开布局弹出窗口,因此您的代码应如下所示:
$('.my-class').on('click', openLayoutPopup);
调用openLayoutPopup
回调函数时,事件参数将传递给该函数。
您可以查看 jQuery.on 的文档供引用。
对于另一个函数,您可以使用自定义 CSS 类或数据属性来指示有一个打开的弹出窗口,而不是将第二个 bool 参数传递给单击事件处理程序,因此您的 openLayoutPopup
函数可以包含这样的内容:
$('body').addClass('has-popup')
在 closeLayoutPopup
中,您只需检查该类是否存在即可确定是否存在打开的弹出窗口,并最终在关闭弹出窗口时将其删除。
关于javascript - 在 jQuery 自定义函数中使用事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45198060/