Javascript 重构简单jQuery切换选择器
我正在将代码从document.ready()移动到自动执行的匿名函数。我已经完成了一些较大的代码片段,但我主要是在与较小的代码片段作斗争。像这个:Javascript 重构简单jQuery切换选择器,javascript,jquery,refactoring,Javascript,Jquery,Refactoring,我正在将代码从document.ready()移动到自动执行的匿名函数。我已经完成了一些较大的代码片段,但我主要是在与较小的代码片段作斗争。像这个: /** Advanced properties toggle **/ $('a.toggle-link').click(function (e) { $(this).next().slideToggle('slow'); e.preventDefault(); }); 我如何重构它,以便能够为选择器a.toggle-link(这样
/**
Advanced properties toggle
**/
$('a.toggle-link').click(function (e) {
$(this).next().slideToggle('slow');
e.preventDefault();
});
我如何重构它,以便能够为选择器
a.toggle-link
(这样任何东西都可以传递到函数中)、为.slideToggle
(这样我就可以传递.slideDown
、.slideUp
,…)和slow
?这种方法使用jQuery,尽管我在很大程度上坚持使用本机DOM方法:
function actOnElem(el, method, duration) {
// if no passed 'el' or 'method' return
if (!el || !method) {
return false;
}
else {
// if 'el' is an element-node, use 'el' else assume it's an id
el = el.nodeType == 1 ? el : document.getElementById(el);
// duration is used if passed, otherwise 'slow' is used as the default
duration = duration || 'slow';
// create a jQuery object from 'el',
// call the method, if it exists,
// and use the 'duration'
$(el)[method](duration);
}
}
actOnElem(document.getElementById('two'), 'slideDown', 1000);
请注意,没有健全性检查,因此如果元素已经可见,并且您使用slideDown
调用函数,则不会发生任何事情。虽然我认为这回答了您的问题,但我完全不确定您为什么要采用这种方法,而不是直接调用jQuery方法
稍微修改了功能,以允许(极其简单的)故障报告:
function actOnElem(el, method, duration, debug) {
if (!el || !method) {
return false;
}
else {
el = el.nodeType == 1 ? el : document.getElementById(el);
duration = duration || 'slow';
if ($(el)[method]) {
$(el)[method](duration);
}
else if (debug) {
console.log('Did you make a typo? There seems to be no "' + method + '" method.');
}
}
}
actOnElem(document.getElementById('two'), 'slidedown', 1000, true);
// ^
// +--- typo, should be 'slideDown'