0

我已经阅读了很多关于 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');
    }
});

谁能找到错误？

4

1 回答 1

1

这些功能xxxxxx_mouse_command()超出了插件的范围。您应该将它们从$(document).ready()全局范围移动。

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

缺少一些分号，并且您在 switch 和 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');
}
于 2012-12-04T13:19:44.560 回答