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