Question

我正在制作一个基本的jQuery插件，用户可以使用该插件更改Bg颜色，字体颜色等。

我希望插件的用户能够定义这些更改变为活动的元素。

我知道我必须使用'this'，但我不知道该怎么做。

这是插件的代码

(function($, window, document, undefined){
//Define your own variables first

var wrapper = $('.wrapper');
var p = $('p');

//Define the default settings here
var settings = {
    textColor: 'red'
};


//Write your methods here
var methods = {
    //Call this method to initialize the plugin
    init: function(){
        console.log("Initialize the plugin");
        $('input').on('change', methods.changeColor);
        $('select').on('change', methods.changeFont);
        $('.slider').on('change', methods.changeWidth);
    },

    changeColor: function(){
        console.log("This will change the background and/or font color");

        var userBackgroundColor = $("#userBackgroundColor").val();
        var userTextColor = $("#userTextColor").val().toLocaleLowerCase();

        wrapper.css({
            backgroundColor: userBackgroundColor,
            color: userTextColor
        });
    },

    changeFont: function(){
        console.log("This will change the font");

        var userFontSize = $("option:selected").val();

        console.log(userFontSize);

        p.css({
            fontSize: userFontSize + 'em'
        })
    },

    changeWidth: function(){
        var p = $('p');
        var userWidth = $(".slider").val();

        var widthFontChange = userWidth / 20;

        if (widthFontChange == 1) {
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'em'
            });
        }


        else {
            widthFontChange = userWidth / 2;
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'px'
            })
        }
    }

};



//Actual plugin call
$.fn.pluginName = function(options){
    //If the user overrides defaults by setting his own options
    if(options){
        settings = $.extend(settings, options);
    }
    //Put any eventHandlers here, like this:
    this.on('change', methods.changeColor);
    this.on('change', methods.changeFont);
    this.on('change', methods.changeWidth);

    //Init the plugin with the $selector
    methods.init(this);

    //Return this for jQuery chaining
    return this;
};
}(jQuery, window, document));

这是用户可以定义插件必须工作的对象的文件

$(document).ready(function(){
$('body').pluginName();
});

我的问题是，如何以我想要的方式完成这项工作？

Answer 1

如果我正确理解您的问题，您需要提供设置以选择要监听更改的各种组件。如果是的话......

将jQuery this和options传递给您的init方法，因此它具有将事件连接到特定子元素所需的一切。

我切换到使用on的委托版本，因为它将在动态变化后继续存在。

JSFiddle：http://jsfiddle.net/CgGjq/6/

关键部分是

init: function ($element, options) {
            console.log("Initialize the plugin");
            $element.on('change', options.input || 'input', methods.changeColor);
            $element.on('change', options.select || 'select', methods.changeFont);
            $element.on('change', options.slider || '.slider', methods.changeWidth);
        },

使用选项中的属性覆盖选择器（如果未提供，则默认使用插件默认设置）。

然后您可以使用以下选项：

$(document).ready(function () {
    $('body').pluginName({
        select: '#userFontSize', // Override the selectors etc
        slider: "#userWidth.slider"
    });
});

如何使jquery插件适用于用户定义的元素

1 个答案:

JSFiddle：http://jsfiddle.net/CgGjq/6/