jQuery可重用函數

以下函數運行良好。但是，我希望通過傳遞新參數來重複使用相同的功能。這樣做的最好方法是什麼？jQuery可重用函數

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

來源

2013-02-14 Alex

重新使用它？你的意思是把它變成一個插件？ http://docs.jquery.com/Plugins/Authoring – 2013-02-14 13:21:55

只需調用具有不同參數的函數？ – adeneo 2013-02-14 13:22:22

@adeneo如果他們實際上使用現有代碼中的參數，那麼這將起作用。 – 2013-02-14 13:34:32

我想你可能會尋找的東西像這樣：

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');

來源

2013-02-14 13:27:41

話雖如此，這種策略主要是一種黑客攻擊，你應該真的在將這個插件轉換成插件，如@ jay-blanchard – 2013-02-14 13:29:35

好吧然後我會考慮將它轉換爲插件，謝謝你的建議。 .. – Alex 2013-02-14 13:53:43

如果你目前只是聲明具有相同名稱的參數（你永遠不會傳遞參數，當你調用該函數）變量，而不是檢查是否值已經過去了，只是到初始化如果它們沒有，則爲「默認」值。

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

來源

2013-02-14 13:24:34

jQuery可重用函數

回答

相關問題