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

我担心的是我想在满足间隔或条件时自动触发它。我使用了$（'#active-chat'）。触发器（'click'）然而它不起作用。有什么方法可以自动触发吗？先感谢您。

Answer 1

.click()返回jQuery对象，因此在click事件中永远不会调用您的函数。如果您希望在点击期间触发它，则需要将处理函数作为参数添加到click()，如下所示：

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

在这种形式.trigger('click')应该有效，但我不太明白为什么在你的插件中没有引用$.fn的时候会使用this原型。这可能是一个简单的功能。

触发jquery插件自动onclick

1 个答案: