Question

我正在将我的代码从document.ready（）移动到自动执行匿名函数。我已经做了一些更大的代码片段，但我主要是与较小的代码进行斗争。像这样：

/**
Advanced properties toggle
**/
$('a.toggle-link').click(function (e) {
    $(this).next().slideToggle('slow');
    e.preventDefault();
});

我如何重构这个以便能够为a.toggle-link引入选择器.slideToggle的变量（因此任何东西都可以传递给函数）（所以我可以传入{{1} }，.slideDown，...）和.slideUp？

Answer 1

这种方法使用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);

JS Fiddle demo

请注意，没有健全性检查，因此如果该元素已经可见并且您使用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'

JS Fiddle demo

重构简单的jQuery切换选择器

1 个答案: