自動觸發jquery插件onclick

Question

我有一個jQuery插件，當你點擊按鈕時，顯示一個隱藏的div和動畫。我使用了jquery.fn原型。

這是jQuery插件

(function($) { 
      'use strict'; 
      $.fn.launchBtn = function(options) { 
       var mainBtn, panel, clicks, settings, launchPanelAnim, closePanelAnim, openPanel, boxClick, panelBody, panelMedia; 
       mainBtn = $(".proactive-chat-button"); 
       panel = $("#proactive-chat .panel"); 
       panelMedia = $("#proactive-chat .panel-media"); 
       panelBody = $("#proactive-chat .panel-body"); 
       clicks = 0; 
       //default settings 
       settings = $.extend({ 
        openDuration: 600, 
        closeDuration: 200, 
        rotate: true 
       }, options); 
       //Open panel animation 
       launchPanelAnim = function() { 
        $(panel).removeClass('swift-out'); 
        $(panelMedia).removeClass('swift-out'); 
        $(panelBody).removeClass('swift-out'); 
        panel.animate({ 
        opacity: "show", 
        width: "show", 
        height: "show", 
        }, settings.openDuration); 
        $(panel).addClass('swift-in'); 
        $(panelMedia).addClass('swift-in'); 
        $(panelBody).addClass('swift-in'); 
        panelMedia.animate({ 
        opacity: "show", 
        width: "slideDown", 
        height: "slideDown", 
        transitionDelay: "0.1s" 
        }, settings.openDuration); 

        calculate(); 
        $('.proactive-chat-button').addClass('shadow-3'); 

       }; 
       //Close panel animation 
       closePanelAnim = function() { 
        $(panel).removeClass('swift-in'); 
        $(panelMedia).removeClass('swift-in'); 
        $(panelBody).removeClass('swift-in'); 
        $(panel).addClass('swift-out'); 
        $(panelMedia).addClass('swift-out'); 
        $(panelBody).addClass('swift-out'); 
        panel.animate({ 
        opacity: "hide", 
        width: "hide", 
        height: "hide" 
        }, settings.closeDuration); 
        panelMedia.animate({ 
        opacity: "hide", 
        width: "slideDown", 
        height: "slideDown", 
        transitionDelay: "0.02s" 
        }, settings.openDuration); 
        $('.proactive-chat-button').removeClass('shadow-3'); 
        $('.modal-overlay').fadeOut(100); 
       }; 
       //Open panel and rotate icon 
       openPanel = function(e) { 
        if (clicks === 0) { 
        if (settings.rotate) { 
         // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward'); 
        } 
        launchPanelAnim(); 
        clicks++; 
        } else { 
        if (settings.rotate) { 
         //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward'); 
        } 
        closePanelAnim(); 
        clicks--; 
        } 
        e.preventDefault(); 
        return false; 
       }; 
       //Allow clicking in panel 
       boxClick = function(e) { 
        e.stopPropagation(); 
       }; 
       //Main button click  
       mainBtn.on('click', openPanel); 
       //Prevent closing panel when clicking inside 
       panel.click(boxClick); 
       $('.proactive-chat-icon').click(function() { 
        $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty'); 
       }); 
       $('.panel-heading-button').click(function() { 
        if (clicks === 0) { 
        if (settings.rotate) { 
         // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward'); 
         $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty'); 
        } 
        launchPanelAnim(); 
        clicks++; 
        } else { 
        if (settings.rotate) { 
         //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward'); 
         $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close'); 
        } 
        closePanelAnim(); 
        clicks--; 
        } 
       }); 
       $(document).click(function() { 
        closePanelAnim(); 
        if (clicks === 1) { 
        $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close'); 

        } 
        clicks = 0; 
       }); 
      }; 
     }(jQuery)); 

和使用，我已經調用的方法launchBtn（）

$("#proactive-chat").click().launchBtn({ 
        openDuration: 250, 
        closeDuration: 300 
       }); 

我關心的是我想自動觸發它時的間隔或條件得到滿足。我已經使用$（'＃proactive-chat'）。trigger（'click'），但它不起作用。有什麼辦法可以自動觸發嗎？先謝謝你。

Answer 1

.click()返回jQuery對象，因此你的函數永遠不會被點擊事件調用。如果你想讓它獲得的點擊在解僱你需要作爲一個參數添加處理函數click()像這樣：

$("#proactive-chat").click(function(){ 
    $(this).launchBtn({ 
     openDuration: 250, 
     closeDuration: 300 
    }); 
}); 

在這種形式.trigger('click')應該工作，雖然我不明白爲什麼你會使用$.fn原型，當你沒有在你的插件中的任何地方引用this。這可能是一個簡單的功能。