插件方法声明-无法使其工作

本文介绍了插件方法声明-无法使其工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在努力寻找正确的语法，以使方法在带有插件的对象上可用.这是基本框架:

I've been struggling with exactly what the correct syntax is to make methods available on an object with a plugin. Here's the basic framework:

<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
    $.test = function(el, options) {
        this.whiten = function() {
            $(this).css('background-color', options.bg);
        }
    };
    $.test.settings = {
        bg: 'white'
    };
    $.fn.test = function(options) {
        options = $.extend(options, $.test.settings);
        return this.each(function() {
            $.test(this, options);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('#list').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('#list').whiten();
    });
});
</script>
</head>

<body>
<button id="go">whiten</button>
<ul id="list">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
</body>
</html>

我想我不确定是如何进行功能分配的. $.test内的this将引用包裹在我的列表中的jQuery对象，因此我认为this.myMethod = function() {可以工作，但无效. $(this)是一个双重包装，el是我的列表(并且我不想直接将方法分配给该对象，因为我无法像这样调用它:$('#list').whiten())，并且$(el)与$(this)相同...该怎么做?

and I guess what I'm not sure about is how to make the function assignment. this inside of $.test will refer to the jQuery object wrapped around my list so I would have thought that this.myMethod = function() { would have worked but it doesn't. $(this) would be a double wrapper, el is my list (and I don't want to assign the method directly to the object since I wouldn't be able to call it like this: $('#list').whiten()), and $(el) would be the same as $(this)... so how is this done?

-更新-

我已经创建了一个[ jsfiddle ]来解决问题

I've created a [jsfiddle] to play with the problem

-更新-

我也曾尝试将方法放在$.fn.test函数中，但无济于事

I also did try placing the method in the $.fn.test function but to no avail

推荐答案

在经过多次牙和咬牙切齿之后，我发现了这一点.我不确定我是否理解为什么会这样，但是现在我很高兴它能成功！

after much wailing and gnashing of teeth, I figured it out. I'm not sure I understand why it works that way but for now I'm just happy it does!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
    $.test = {
        bg: 'white'
    };

    $.fn.test = function(options) {
        options = $.extend({}, $.test, options);

        this.whiten = function() {
            $(this).css('background-color', options.bg);
        };

        return this.each(function() {
            $.fn.test(options);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('#list').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('#list').whiten();
    });
});
</script>
</head>

<body>
<button id="go">whiten</button>
<ul id="list">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
</body>
</html>

这篇关于插件方法声明-无法使其工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！