[英]Refactor simple jQuery toggle selector
我正在将我的代码从 document.ready() 移动到自执行匿名函数。 我已经完成了一些较大的代码片段,但我主要是在处理较小的代码片段。 像这个:
/**
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'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.