Question

以下功能效果很好。但是，我希望通过传递新参数来重用相同的函数。这样做的最佳方式是什么？

function overlay_f (clickable_link, current_link, overlay_content, overlay) {
    var clickable_link = $('.p_wrapper p'),
        overlay = $('#overlay'),
        close_overlay = $('.close_overlay');

    clickable_link.click(function (evt) {
        evt.preventDefault();

        current_link = $(this).attr('class');
        var overlay_content = $('#'+current_link);

        overlay.children().fadeOut(200).promise().done(function () {
            overlay_content.fadeIn();
        });

        overlay.fadeIn();
    });

    overlay.click(function () {
        overlay.fadeOut();
        overlay.children().fadeOut(500);
    });
}    

overlay_f();

Answer 1

我想你可能正在寻找这样的东西：

function overlay_f(cl, o, co) {
    var clickable_link = $(cl),
    overlay = $(o),
    close_overlay = $(co);

    clickable_link.click(function(evt){
        evt.preventDefault();

        current_link = $(this).attr('class');
        var overlay_content = $('#'+current_link);

        overlay.children().fadeOut(200).promise().done(function () {
            overlay_content.fadeIn();
        });
        overlay.fadeIn();
    });

    overlay.click(function(){
        overlay.fadeOut();
        overlay.children().fadeOut(500);
    });
}   

overlay_f('.p_wrapper p', '#overlay', '.close_overlay');

Answer 2

当前您正在声明与参数名称相同的变量（您在调用函数时从不传递参数），而是检查是否已经传递了值，并且仅初始化为“default”如果他们没有，则为值。

function overlay_f(clickable_link, current_link, overlay_content, overlay) {
    var clickable_link = clickable_link || $('.p_wrapper p'),
        overlay = overlay || $('#overlay'),
        close_overlay = $('.close_overlay');

    clickable_link.click(function (evt) {
        evt.preventDefault();

        var current_link = current_link || $(this).attr('class'),
            overlay_content = overlay_content || $('#' + current_link);

        overlay.children().fadeOut(200).promise().done(function () {
            overlay_content.fadeIn();
        });
        overlay.fadeIn();
    });

    overlay.click(function () {
        overlay.fadeOut();
        overlay.children().fadeOut(500);
    });
}

然后你要么不带参数调用它：

overlay_f();

或传递你想在里面使用的参数：

overlay_f(arg1, arg2, arg3, arg4);

jQuery可重用的功能

2 个答案: