如何縮短Javascript以關閉（.popup）div？

這個javascript/jquery有助於關閉一個帶有幾個不同功能的彈出窗口 - 單擊一個div，按esc或單擊對象外部。有沒有辦法縮短這段代碼？還是有更好的方法來寫它？謝謝！如何縮短Javascript以關閉（.popup）div？

$(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'); 
    } 
});

來源

2017-06-12 Troy Riemer

一種選擇是有'功能closePopup（）'包含實際的關閉代碼，並調用在您的處理程序。或者，如果有「主要」處理程序（例如關閉按鈕），則可以讓其他事件執行'$（'。ex'）。trigger（'click'）;' –

由於操作始終是相同的，創建一個功能。 – doutriforce

是的，factori在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() 
});

來源

2017-06-12 14:55:12

你在你的函數具有非常redondant代碼：

首先創建一個功能彈出收盤：

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() 
    } 
});

調用它在功能

來源

2017-06-12 14:53:44 aorfevre

你可以縮短到更多'$（'。ex'）。click（_closePopup）' –

這只是一個語法來防止兩次函數調用。也許它會混淆業主的問題。但是是真的;這可以通過這種方式來縮小。 – aorfevre

那麼，你只需傳遞一個函數，而不是調用另一個函數的函數:) –

如何縮短Javascript以關閉（.popup）div？

回答

相關問題