jQuery插件不起作用

Question

我已阅读了很多关于jQuery插件的内容，并试图为我自己的网站制作一些东西。这是我的第一个剧本，基本上它只是为了好玩..不知何故插件不工作..

这是我的插件

;(function($){ 

    // We name the function mouser 
    $.fn.mouser = function(options) { 

     // Default settings - can be replaced by options 
     var defaults = { 
      mouse: "click"  // click is an event that contains both the mousedown and mouse up event in one. 
     } 

     // Extend the options and defaults to variables 
     var opts = $.extend(defaults, options); 

     // Now start the Function 
     return this.each(function() { 

      // The original element is defined with a variable 
      var element = $(this) 

      // We have to define the functions that has to react based on the option 'mouse' 
      // So if it is - as standard - set to 'click' 
      if (opts.mouse == "click") { 

       // ... we want to do a 'click'-function (Basic jQuery) 
       // when the element is clicked 
       element.click(function(e) { 

        // ... we ensure which mouse button has been pressed 
        switch (e.which) { 

         // ... and execute a function based on that information 

         // Left Mouse Button 
         case 1: {left_mouse_command(); return false;} 

         // Middle Mouse Button 
         case 2: {middle_mouse_command(); return false;} 

         // Right Mouse Button 
         case 3: {right_mouse_command(); return false;} 

        }; 

       }); 

      // Else if 'mouse' is set to 'mouseup' 
      } else if (opts.mouse == "mouseup") { 

       // ... we want to do a 'mouseup'-function (Basic jQuery) 
       // when the mouse is released from the element 
       element.mouseup(function(e) { 

        // ... we ensure which mouse button has been pressed 
        switch (e.which) { 

         // ... and execute a function based on that information 

         // Left Mouse Button 
         case 1: {left_mouse_command(); return false;} 

         // Middle Mouse Button 
         case 2: {middle_mouse_command(); return false;} 

         // Right Mouse Button 
         case 3: {right_mouse_command(); return false;} 

        }; 

       }); 

      // Else if 'mouse' is set to 'mousedown' 
      } else if (opts.mouse == "mousedown") { 

       // ... we want to do a 'mousedown'-function (Basic jQuery) 
       // when the mouse begins to click on the element 
       element.mousedown(function(e) { 

        // ... we ensure which mouse button has been pressed 
        switch (e.which) { 

         // ... and execute a function based on that information 

         // Left Mouse Button 
         case 1: {left_mouse_command(); return false;} 

         // Middle Mouse Button 
         case 2: {middle_mouse_command(); return false;} 

         // Right Mouse Button 
         case 3: {right_mouse_command(); return false;} 

        }; 
       }); 
      }; 
     }); 
    }; 
})(jQuery); 

然后我把这样的功能：

$(document).ready(function() { 


    $(document).mouser(); 

    function left_mouse_command() { 
     alert('You clicked with the left mouse button'); 
    } 

    function middle_mouse_command() { 
     alert('You clicked with the middle mouse button'); 
    } 

    function right_mouse_command() { 
     alert('You clicked with the right mouse button'); 
    } 
}); 

任何人都可以找到错误？

Answer 1

功能xxxxxx_mouse_command()超出插件的范围。您应该将它们从$(document).ready()移到全球范围。

编辑：每个case的最后一个命令应该是break;而不是return false;。您应该将e.preventDefault()放在每个处理程序的末尾。你不需要包装在括号{}

一些分号缺少你case命令，你必须在开关的最后增加了一些“不寻常”分号和if语句

试试这个

;(function($){ 

// We name the function mouser 
$.fn.mouser = function(options) { 

    // Default settings - can be replaced by options 
    var defaults = { 
     mouse: "click"  // click is an event that contains both the mousedown and mouse up event in one. 
    }; 

    // Extend the options and defaults to variables 
    var opts = $.extend(defaults, options); 

    // Now start the Function 
    return this.each(function() { 

     // The original element is defined with a variable 
     var element = $(this); 

     // We have to define the functions that has to react based on the option 'mouse' 
     // So if it is - as standard - set to 'click' 
     if (opts.mouse == "click") { 

      // ... we want to do a 'click'-function (Basic jQuery) 
      // when the element is clicked 
      element.click(function(e) { 

       // ... we ensure which mouse button has been pressed 
       switch (e.which) { 

        // ... and execute a function based on that information 

        // Left Mouse Button 
        case 1: left_mouse_command(); break; 

        // Middle Mouse Button 
        case 2: middle_mouse_command(); break; 

        // Right Mouse Button 
        case 3: right_mouse_command(); break; 

       } 

       e.preventDefault(); 

      }); 

     // Else if 'mouse' is set to 'mouseup' 
     } else if (opts.mouse == "mouseup") { 

      // ... we want to do a 'mouseup'-function (Basic jQuery) 
      // when the mouse is released from the element 
      element.mouseup(function(e) { 

       // ... we ensure which mouse button has been pressed 
       switch (e.which) { 

        // ... and execute a function based on that information 

        // Left Mouse Button 
        case 1: left_mouse_command(); break; 

        // Middle Mouse Button 
        case 2: middle_mouse_command(); break; 

        // Right Mouse Button 
        case 3: right_mouse_command(); break; 

       } 
       e.preventDefault(); 
      }); 

     // Else if 'mouse' is set to 'mousedown' 
     } else if (opts.mouse == "mousedown") { 

      // ... we want to do a 'mousedown'-function (Basic jQuery) 
      // when the mouse begins to click on the element 
      element.mousedown(function(e) { 

       // ... we ensure which mouse button has been pressed 
       switch (e.which) { 

        // ... and execute a function based on that information 

        // Left Mouse Button 
        case 1: left_mouse_command(); break; 

        // Middle Mouse Button 
        case 2: middle_mouse_command(); break; 

        // Right Mouse Button 
        case 3: right_mouse_command(); break; 

       } 
       e.preventDefault(); 
      }); 
     } 
    }); 
} 
})(jQuery); 

和

$(document).ready(function() { 
    $(document).mouser(); 
}); 

function left_mouse_command() { 
    alert('You clicked with the left mouse button'); 
} 

function middle_mouse_command() { 
    alert('You clicked with the middle mouse button'); 
} 

function right_mouse_command() { 
    alert('You clicked with the right mouse button'); 
}