Question

我创建了一个简单的jQuery插件来将元素更改为蓝色，并且可以传递一个参数来将元素更改为给定的颜色。

我现在想创建一个新插件，将颜色更改为黄色，而不必将颜色作为参数传递。我已阅读https://stackoverflow.com/a/4414356/1032531，但它似乎描述了向对象添加方法。

这是如何最好地完成的？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Extend jQuery Plugin</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var defaults = {
                    'color'  : 'blue'
                };

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color',settings.color);
                        });
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.changeColor = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.changeColor');
                    }    
                };
                }(jQuery)
            );

            jQuery.fn.extend({
                changeColorToYellow: function() {
                    //What do I do?
                    //$.changeColor({color:'yellow'})
                }
            });

            $(function() {
                $('#myElement1').changeColor();
                $('#myElement2').changeColor({color:'red'});
                $('#myElement3').changeColorToYellow();
            });
        </script>

    </head>
    <body>
        <p id='myElement1'>myElement1</p>
        <p id='myElement2'>myElement2</p>
        <p id='myElement3'>myElement3</p>
    </body>
</html>

Answer 1

您可以在changeColorToYellow中使用this.changeColor（{color：'yellow'}）。不提供任何选项将使您的插件做正确的事情。这是可以的，只要你不打算创建多个插件只是试图用不同的颜色做同样的事情。

<强>代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Extend jQuery Plugin</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var defaults = {
                    'color'  : 'blue'
                };

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color',settings.color);
                        });
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.changeColor = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.changeColor');
                    }    
                };
                }(jQuery)
            );

            jQuery.fn.extend({
                changeColorToYellow: function() {
                    this.changeColor({color: 'yellow'});
                }
            });

            $(function() {
                $('#myElement1').changeColor();
                $('#myElement2').changeColor({color:'red'});
                $('#myElement3').changeColorToYellow();
            });
        </script>

    </head>
    <body>
        <p id='myElement1'>myElement1</p>
        <p id='myElement2'>myElement2</p>
        <p id='myElement3'>myElement3</p>
    </body>
</html>

扩展jQuery插件以更改配置

1 个答案: