Question

这个javascript / jquery有助于关闭一个带有几个不同功能的弹出窗口 - 单击div，按esc或在对象外部单击。有没有办法缩短这段代码？或者有更好的方法来写它吗？谢谢！

$(function () {
    $('.ex').click(function () {
        $('.popup').removeClass('fadeIn').slideUp(1000);
        $('.blurme').removeClass('blur');
    });
});

$(document).on('keydown', function (e) {
    if (e.keyCode === 27) { // ESC
        $('.popup').removeClass('fadeIn').slideUp(1000);
        $('.blurme').removeClass('blur');
    }
});

$(document).click(function (e) {
    if (e.target.id != 'popup') {
        $('.popup').removeClass('fadeIn').slideUp(1000);
        $('.blurme').removeClass('blur');
    }
});

Answer 1

是的，closePopup()函数中的因子分解。您也可以链接$(document).on(...).click(...)

function closePopup() {
    $('.popup').removeClass('fadeIn').slideUp(1000);
    $('.blurme').removeClass('blur');
}

$(function () {
    $('.ex').click(closePopup);
});

$(document).on('keydown', function (e) {
    if (e.keyCode === 27) closePopup()
}).click(function (e) {
    if (e.target.id != 'popup') closePopup()
});

Answer 2

你的功能中有非常重要的代码：

首先为弹出结束创建一个函数：

var _closePopup = function (){
        $('.popup').removeClass('fadeIn').slideUp(1000);
        $('.blurme').removeClass('blur');
}

并使用_closePopup()

在您的函数中调用它

$(function () {
    $('.ex').click(function () {
        _closePopup()
    });
});

$(document).on('keydown', function (e) {
    if (e.keyCode === 27) { // ESC
        _closePopup()
    }
});

$(document).click(function (e) {
    if (e.target.id != 'popup') {
        _closePopup()
    }
});

如何缩短Javascript以关闭（.popup）div？

2 个答案: